首页、及教学出版样式修改

QYF-GitLab1

1 天以前 49a435043b0b1a289a24606e35253365d7ab3956

 src/layout/components/login.vue

@@ -1,75 +1,47 @@
<template>
  <el-dialog
    align-center
    append-to-body
    v-model="dialogFormVisible"
    @close="closeDialog"
    @open="openDialog"
    class="fansdialog"
  >
    <div style="display: flex; justify-content: space-around">
      <el-image :src="dialogLeftImg" class="leftImg" />

  <el-dialog append-to-body v-model="dialogFormVisible" @close="closeDialog" @open="openDialog" width="804px"
    class="fansdialog" style="padding: 0; padding-bottom: 0px">
    <div class="changeDialog">
      <div class="leftImg"></div>
      <div class="logIn">
        <div class="signUpTitle" v-if="flag == 'logIn'">
          <ul>
            <li
              @click="signUpWay = 'authSignUp'"
              :style="{
                color: signUpWay == 'authSignUp' ? '#144941' : '#545C63',
              }"
            >
            <li @click="signUpWay = 'authSignUp'" :style="{
              color: signUpWay == 'authSignUp' ? '#019E58' : '#545C63',
            }" style="font-weight: 700">
              手机号登录
            </li>
            <li>|</li>
            <li
              @click="wechatLoginOpen"
              :style="{ color: signUpWay == 'wechat' ? '#144941' : '#545C63' }"
            >
            <li @click="wechatLoginOpen" :style="{ color: signUpWay == 'wechat' ? '#019E58' : '#545C63' }"
              style="font-weight: 700">
              微信登录
            </li>
          </ul>
        </div>
        <div v-else style="text-align: center; color: #144941">注册</div>
        <div
          class="singUpPhone"
          v-if="signUpWay === 'phone' || 'authSignUp'"
          :style="{ height: signUpWay == 'findPassword' ? '450px' : '400px' }"
        >
          <el-form
            :model="passFormData"
            v-if="signUpWay === 'phone' || 'authSignUp'"
            ref="passFormRef"
            @keyup.enter="signInSystem(passFormRef)"
          >
            <el-form-item
              v-if="signUpWay !== 'findPassword'"
              :rules="[
                { min: 11, max: 11, message: '请输入11位电话号码' },
                {
                  validator: (_, value, callback) => {
                    if (
                      !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
                        value,
                      )
                    ) {
                      callback('请输入11位电话号码')
                    } else {
                      callback()
                    }
                  },
        <div class="singUpPhone" v-if="signUpWay === 'phone' || 'authSignUp'"
          :style="{ height: signUpWay == 'findPassword' ? '450px' : '400px' }">
          <el-form :model="passFormData" v-if="signUpWay === 'phone' || 'authSignUp'" ref="passFormRef"
            @keyup.enter="signInSystem(passFormRef)">
            <el-form-item v-if="signUpWay !== 'findPassword'" :rules="[
              { min: 11, max: 11, message: '请输入11位电话号码' },
              {
                validator: (_, value, callback) => {
                  if (
                    !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
                      value,
                    )
                  ) {
                    callback('请输入11位电话号码')
                  } else {
                    callback()
                  }
                },
              ]"
              prop="telNumber"
            >
              },
            ]" prop="telNumber">
              <el-input v-model="passFormData.telNumber" placeholder="请输入手机号" size="large">
                <template #prepend>
                  <el-select
                    v-model="select"
                    placeholder="Select"
                    style="width: 110px"
                    class="selectPhone"
                  >
                  <el-select v-model="select" placeholder="Select" style="width: 110px" class="selectPhone">
                    <el-option label="中国+86" value="86" />
                  </el-select>
                </template>
@@ -78,84 +50,48 @@
            <el-form-item>
              <el-button class="yanzhengBtn" @click="sliderImgDialogVisable = true">验证</el-button>
            </el-form-item>
            <el-form-item
              v-if="signUpWay === 'authSignUp'"
              class="codeWay"
              :rules="[
                { required: true, message: '请输入验证码' },
                { min: 4, max: 6, message: '请输入有效验证码' },
              ]"
              prop="telCode"
            >
            <el-form-item v-if="signUpWay === 'authSignUp'" class="codeWay" :rules="[
              { required: true, message: '请输入验证码' },
              { min: 4, max: 6, message: '请输入有效验证码' },
            ]" prop="telCode">
              <el-input v-model="passFormData.telCode" placeholder="请输入验证码" size="large" />
              <el-button
                type="primary"
                class="codeBtn"
                :disabled="countDown != 0"
                @click="getCode(passFormRef)"
                >{{ countDown == 0 ? '获取验证码' : '验证码(' + countDown + 's)' }}</el-button
              >
              <el-button type="primary" class="codeBtn" :disabled="countDown != 0" @click="getCode(passFormRef)">{{
                countDown == 0 ?
                  '获取验证码' : '验证码(' + countDown + 's)' }}</el-button>
            </el-form-item>
            <el-form-item
              v-if="flag === 'signUp'"
              :rules="[
                { required: true, message: '请输入密码' },
                { min: 8, max: 16, message: '密码在8到16位之间' },
                {
                  validator: (rule, value, callback) => {
                    if (!/\d/.test(value) || /^\d+$/.test(value)) {
                      callback('密码不能为纯数字或字母')
                    } else {
                      callback()
                    }
                  },
            <el-form-item v-if="flag === 'signUp'" :rules="[
              { required: true, message: '请输入密码' },
              { min: 8, max: 16, message: '密码在8到16位之间' },
              {
                validator: (rule, value, callback) => {
                  if (!/\d/.test(value) || /^\d+$/.test(value)) {
                    callback('密码不能为纯数字或字母')
                  } else {
                    callback()
                  }
                },
              ]"
              prop="password"
              class="passwordInput"
            >
              <el-input
                type="password"
                show-password
                v-model="passFormData.password"
                placeholder="请输入密码"
                size="large"
                style="width: 304px"
              >
              },
            ]" prop="password" class="passwordInput">
              <el-input type="password" show-password v-model="passFormData.password" placeholder="请输入密码" size="large"
                style="width: 304px">
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="flag === 'signUp'"
              :rules="[
                { required: true, message: '请输入确认密码' },
                { validator: validateLogInPassword },
              ]"
              prop="confirmPassword"
              class="passwordInput"
            >
              <el-input
                type="password"
                show-password
                v-model="passFormData.confirmPassword"
                placeholder="确认密码"
                size="large"
                style="width: 304px"
              />
            <el-form-item v-if="flag === 'signUp'" :rules="[
              { required: true, message: '请输入确认密码' },
              { validator: validateLogInPassword },
            ]" prop="confirmPassword" class="passwordInput">
              <el-input type="password" show-password v-model="passFormData.confirmPassword" placeholder="确认密码"
                size="large" style="width: 304px" />
            </el-form-item>
          </el-form>

          <el-button class="loginBtn" @click="loginBtn">登录</el-button>
          <el-button class="loginBtn" @click="loginBtn">登录 / 注册</el-button>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="sliderImgDialogVisable"
      align-center
      destroy-on-close="true"
      width="420"
      class="sliderImgDialog"
    >
    <el-dialog v-model="sliderImgDialogVisable" align-center destroy-on-close="true" width="420"
      class="sliderImgDialog">
      <verify :MG="MG" @loginImgVerify="loginImgVerify"></verify>
    </el-dialog>
  </el-dialog>
@@ -168,7 +104,7 @@
import '@/components/sliderImg/sliderImg.js'
import '@/components/sliderImg/sliderImg.css'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { useUserStore } from '@/store'
import { useRouter } from 'vue-router'
const router = useRouter()

@@ -201,7 +137,7 @@
  dialogFormVisible.value = false
}
// 弹窗打开事件
const openDialog = () => {}
const openDialog = () => { }

const loginImgVerify = (code) => {
  sliderImgDialogVisable.value = false
@@ -220,11 +156,6 @@
      }
    })
}

watchEffect(() => {
  if (dialogFormVisible.value) {
  }
})

//登录

@@ -257,7 +188,7 @@
        address: userInfo && userInfo.data ? JSON.parse(userInfo.data).address : '',
        userType: userTypeObj && userTypeObj.data ? JSON.parse(userTypeObj.data).userType : '',
      }
      localStorage.setItem('jsek-isUserInfo', userData?.userType == '' ? '-1' : '1')
      localStorage.setItem('xiehe-isUserInfo', userData?.userType == '' ? '-1' : '1')
      let teacherRole = res.roleLinks.find((item) => item.role.refCode == 'teacher')
      let teacherInfos = res.infoList.find((item) => item.type == 'teacherInfo')
      let wechatInfo = res.infoList.find((item) => item.type == 'WeChat')
@@ -307,7 +238,14 @@
        })
      }
    }
    router.go(0)
    if (localStorage.getItem('loginBack')) {
      console.log(localStorage.getItem('loginBack'))
      debugger
      window.location.href = localStorage.getItem('loginBack')
      localStorage.removeItem('loginBack')
    } else {
      router.go(0)
    }
  })
}

@@ -371,45 +309,29 @@
    width: 80%;
    line-height: 24px;
    color: #000;

    span {
      display: inline-block;
    }
  }
}

.fansdialog {
  width: 806px;

  .changeDialog {
    display: flex;
  }

  .leftImg {
    background-image: url('@/assets/images/header/dialogLeftImg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    width: 403px;
    width: 402px;
    height: 481px;
  }

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    width: 806px;
    height: 575px;
    display: flex;
    padding: 0 !important;
  }

  .leftImg {
    .el-image__inner {
      width: 403px;
    }
  }

  .el-dialog__header {
    padding: 0;
  }

  .el-dialog__body {
    width: 806px;
    display: flex;
    padding: 0 !important;
  }
}

.agreementDialog {
@@ -418,11 +340,6 @@

  p span {
    line-height: 24px;
  }

  .el-dialog__header {
    font-size: 18px;
    color: #333;
  }

  .el-dialog__body {
@@ -452,6 +369,7 @@
    }
  }
}

.sliderImgDialog {
  .el-dialog__body {
    min-height: 320px;
@@ -462,34 +380,45 @@
<style lang="less">
/** 登录注册弹窗 */
.logIn {
  width: 403px;
  height: 100%;
  padding-top: 48px;
  width: 402px;
  height: 481px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  justify-content: center;
  padding-top: 30px;
  box-sizing: border-box;

  .signUpTitle {
    width: 100%;

    ul {
      display: flex;
      justify-content: center;
      width: 100%;

      li {
        height: 20px;
        display: flex;
        align-items: center;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        font-weight: bold;
        font-size: 16px;
        color: #019E58;

        .el-image {
          margin-right: 5px;
          width: 20px;
        }
      }

      li:nth-child(2n + 1) {
        cursor: pointer;
        margin: 0 10px;
      }

      li:first-child {
        margin-left: 0;

        .el-image {
          width: 10px;
        }
@@ -574,12 +503,14 @@
      background-color: #019e58;
      // opacity: 0.55;
    }

    .yanzhengBtn {
      width: 100%;
      height: 41px;
      background-color: #019e58;
      color: #fff;
    }

    .loginBtn {
      width: 76%;
      height: 41px;
@@ -626,6 +557,7 @@
        margin-left: 10px;
        cursor: pointer;
        position: relative;

        span {
          position: absolute;
          top: 35px;
@@ -647,10 +579,12 @@
    line-height: 26px;
  }
}

.policy {
  cursor: pointer;
  color: #ff6c00;
  color: #019e58;
}

/** 注册表单 */
.signUp {
  width: 403px;
@@ -672,7 +606,7 @@

  h4 {
    font-size: 16px;
    color: #ff6c00;
    color: #019e58;
  }

  .logInBox {
@@ -693,6 +627,7 @@
        font-size: 14px;
      }
    }

    .agreement {
      height: 40px;
      display: flex;
@@ -740,6 +675,7 @@
        margin-left: 10px;
        cursor: pointer;
        position: relative;

        span {
          position: absolute;
          top: 35px;
@@ -770,15 +706,18 @@
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .el-form-item {
      &:last-child {
        margin-bottom: 0;
      }

      .el-button {
        height: 40px;
        margin-left: 10px;
      }
    }

    h2 {
      font-size: 20px;
      margin-top: 70px;
@@ -813,20 +752,4 @@
.selectPhone {
  background: #fff;
}

// .el-select {
//   width: 100px;
//   height: 30px;
//   color: red;
//   border: none !important;

//   /deep/ .select-trigger {
//     height: 100%;

//     .el-input--suffix {
//       height: 100%;
//       background-color: #fff;
//     }
//   }
// }
</style>