<template>
  <div class="login_page">
    <div class="login_header">
      <div class="header_left">
        <img src="../../assets/login/login_logo.png" alt="" />
        <span style="margin-left: 10px"> 大数据精准教学诊断平台</span>
      </div>
      <div class="header_right">
        <div class="right_button" @click="GoWebsite">官方网站</div>
      </div>
    </div>
    <div class="login_content" id="particles">
      <div class="login_info">
        <div class="login_info_title">
          <p>HI～欢迎使用</p>
          <p>大数据精准教学诊断平台</p>
        </div>
        <div :class="['login_info_message', { module_tab: tabActive == 1 }]">
          <template v-if="tabActive == 1">
            <div
              :class="['tab_item', { tab_active: actived == item.value }]"
              :key="item.value"
              v-for="item in tabList"
              @click="TabChange(item.value)"
            >
              {{ item.title }}
            </div>
          </template>
          <template v-else>{{ tabActive == 3 ? '忘记密码' : tabActive == 4 ? '绑定账号' : '' }}</template>
        </div>
        <!-- 账号密码登录 -->
        <div v-if="tabActive == 1">
          <div class="login_info_input">
            <el-input v-model="userName" placeholder="请输入账号">
              <template #prefix>
                <span>
                  <img src="@/assets/login/input_user.webp" alt="User Icon" style="width: 18px; height: 18px" />
                </span>
              </template>
              <template #suffix v-if="userName != ''">
                <span @click="ClearInput" style="cursor: pointer">
                  <img src="@/assets/login/input_clear.webp" alt="Clear Icon" style="width: 18px; height: 18px" />
                </span>
              </template>
            </el-input>
          </div>
          <div class="login_info_input">
            <el-input v-model="passWord" :type="isPasswordVisible ? 'text' : 'password'" placeholder="请输入密码">
              <template #prefix>
                <span>
                  <img src="@/assets/login/input_pass.webp" alt="User Icon" style="width: 18px; height: 18px" />
                </span>
              </template>
              <template #suffix>
                <span @click="TogglePasswordVisibility" style="cursor: pointer">
                  <i class="iconfont icon_xianshimima" v-if="isPasswordVisible"></i>
                  <i class="iconfont icon_buxianshimima" v-else></i>
                </span>
              </template>
            </el-input>
          </div>
          <div class="login_info_item">
            <div class="item_left">
              <el-checkbox v-model="remeberPassWord">记住密码</el-checkbox>
            </div>
            <div class="item_right" @click="LoginMode(3)">忘记密码</div>
          </div>
          <div class="login_info_button">
            <el-button style="width: 100%" @click="SubmitLogin()" :loading="loadingLogin">登 录</el-button>
          </div>
        </div>
        <!-- 微信登录 -->
        <div v-if="tabActive == 2" class="wechat_login">
          <p class="text">微信扫描登录</p>
          <div class="wechat_url" id="wechat-qr-container"></div>
        </div>
        <!-- 忘记密码 -->
        <div v-if="tabActive == 3">
          <ForgetPassWord @GoLogin="GoLogin" />
        </div>
        <!-- 绑定账号 -->
        <div v-if="tabActive == 4">
          <div class="login_info_input">
            <el-form :model="bindForm" :rules="bindFormrules" ref="bindFormRef">
              <el-form-item prop="userName">
                <el-input
                  v-model="bindForm.userName"
                  clearable
                  placeholder="请输入账号"
                  prefix-icon="iconfont icon_zhanghao"
                />
              </el-form-item>
              <el-form-item prop="passWord">
                <el-input
                  v-model="bindForm.passWord"
                  show-password
                  clearable
                  placeholder="请输入密码"
                  prefix-icon="iconfont icon_mima"
                />
              </el-form-item>
            </el-form>
          </div>
          <div class="login_info_button">
            <el-button style="width: 100%" @click="BindAccount" :loading="loadingBind">立即绑定</el-button>
          </div>
        </div>
        <!-- 其他登录方式选项 -->
        <div class="login_other_type">
          <div class="other_login_line">
            <span class="line"></span>
            <span class="text">其他登录方式</span>
            <span class="line"></span>
          </div>
          <div class="other_login_icon">
            <div class="icon_item" v-if="tabActive != 1">
              <img src="@/assets/login/account.webp" alt="" @click="LoginMode(1)" />
              <p>账号</p>
            </div>
            <div class="icon_item" v-if="tabActive != 2">
              <img src="@/assets/login/login_wechat.webp" alt="" @click="LoginMode(2)" />
              <p>微信</p>
            </div>
            <!-- <div class="icon_item">
              <img src="@/assets/login/login_feishu.webp" alt=""></img>
              <p>钉钉</p>
            </div> -->
            <!-- <div class="icon_item">
              <img src="@/assets/login/login_email.webp" alt=""></img>
              <p>邮箱</p>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="page_dialog">
      <el-dialog title="绑定账号" center :visible.sync="showBindDialog" width="400px" top="20vh">
        <div class="dialog_center padding_20">
          <div class="bingding_center">
            <el-form :model="bindForm" :rules="bindFormrules" ref="bindFormRef">
              <div class="bingding_input">
                <el-input
                  v-model="bindForm.userName"
                  clearable
                  placeholder="请输入账号"
                  prefix-icon="iconfont icon_zhanghao"
                />
              </div>
              <div class="bingding_input">
                <el-input
                  v-model="bindForm.passWord"
                  clearable
                  placeholder="请输入密码"
                  prefix-icon="iconfont icon_mima"
                />
              </div>
              <div
                class="bingding_button"
                :disabled="!bindForm.userName || !bindForm.passWord"
                @click="BindAccount"
                v-loading="loadingBind"
              >
                立即绑定
              </div>
            </el-form>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import particles from 'particles.js' //页面例子动画特效
import user from '@/http/api/user'
import { setToken } from '@/utils/auth'
import ForgetPassWord from './components/ForgetPassWord'
import { encrypt } from '@/utils/jsencrypt'
import base from '@/http/common/base'
export default {
  components: { ForgetPassWord },
  provide() {
    return {
      setTabActive: () => {
        this.tabActive = 1
      }
    }
  },
  data() {
    return {
      tabList: [
        {
          title: '教师',
          value: 'teacher'
        },
        {
          title: '学生',
          value: 'student'
        }
      ],
      actived: 'student',
      userName: '', //登录账号
      passWord: '', //登录密码
      isPasswordVisible: false, //密码是否可见
      remeberPassWord: false, //记住密码
      loadingLogin: false, //登录按钮加载状态
      tabActive: 1, // 切换账号登录-1，微信登录-2，忘记密码-3，绑定账号-4
      wechatUrl: '', // 微信二维码地址
      code: '', // 回调地址返回登录需要的code
      wxOpenId: '', // 绑定账号需要的openid
      loadingBind: false, // 绑定账号按钮loading
      showBindDialog: false, // 绑定账号弹窗
      bindForm: {
        userName: '', // 用户账号
        passWord: '' // 用户密码
      }, // 绑定用户
      bindFormrules: {
        userName: [{ required: true, message: '请输入账号', trigger: ['blur', 'change'] }],
        passWord: [{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }]
      }, // 绑定用户表单校验

      apiUrl: process.env.VUE_APP_BASE || 'https://www.k12100.com'
    }
  },
  mounted() {
    // 加载微信sdk
    this.LoadSdk()
    //加载粒子动画特效
    this.InitParticles()
    // 监听键盘按下事件
    window.addEventListener('keydown', this.handleKeyDown)
    // 监听微信中间页面传递参数
    window.addEventListener('message', this.WechatLogin)

    // 恢复记住的用户名和密码
    this.RestoreRememberedCredentials()
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown)
    window.removeEventListener('message', this.WechatLogin)
  },
  methods: {
    TabChange(value) {
      this.actived = value
      if (this.actived == 'teacher') {
        //跳转到学生登录界面
        console.log('跳转到教师登录界面', process.env.VUE_APP_BASE)
        window.location.href = `${process.env.VUE_APP_BASE}`
        // window.parent.location.href = `${process.env.VUE_APP_BASE}`;
      }
    },
    // 恢复记住的用户名和密码
    RestoreRememberedCredentials() {
      try {
        const savedUserName = localStorage.getItem('userName')
        const savedUserPassWord = localStorage.getItem('userPassWord')

        if (savedUserName && savedUserPassWord) {
          this.userName = savedUserName
          this.passWord = savedUserPassWord
          this.remeberPassWord = true // 设置记住密码为选中状态
        }
      } catch (error) {
        console.error('恢复记住的凭证时出错:', error)
      }
    },

    handleKeyDown(event) {
      if (event.key === 'Enter') {
        this.SubmitLogin() // 触发登录方法
      }
    },

    //添加统计监控代码
    AddAnalyticsScript() {
      // 等待DOM加载完成
      setTimeout(() => {
        var _s = document.createElement('script')
        _s.setAttribute('type', 'text/javascript')
        _s.setAttribute('id', '_bxtj')
        _s.setAttribute('async', true)

        // 获取当前用户信息
        console.log('获取当前用户信息', this.$store.state.user.userInfo)
        console.log('打印网站siteid', localStorage.getItem('user_schoolWebSiteId'))

        // 设置子站点名称
        const currentUser = this.$store.state.user.userInfo.loginName || '' // 当前用户名
        const subSiteName = this.$store.state.user.userInfo.schoolName || ''
        const mySiteId = localStorage.getItem('user_schoolWebSiteId') || '' // 你的站点ID
        // 构建URL（按照原始代码格式）
        let src = `https://bjedures.bjedu.cn/bjjw_logdb/bxlog.js?user=${currentUser}&id=${mySiteId}`
        if (subSiteName) {
          src += `&subSiteName=${encodeURIComponent(subSiteName)}`
        }
        _s.setAttribute('src', src)
        var body = document.getElementsByTagName('body')
        body[0].appendChild(_s)
      }, 500)
    },

    //密码是否可见
    TogglePasswordVisibility() {
      this.isPasswordVisible = !this.isPasswordVisible
    },

    //加载例子动画特效
    InitParticles() {
      const particlesConfig = {
        // 粒子配置项
        particles: {
          number: {
            value: 60, //控制例子的数量 默认80
            density: {
              enable: true, //是否启用粒子密度检测（默认值：true）
              value_area: 800 //密度检测的区域大小
            }
          },
          color: {
            // value: ["#ff0000", "#00ff00", "#0000ff"]//定义例子的颜色数组
            value: '#ffffff'
          },
          shape: {
            type: ['circle'], //粒子的形状  支持  circle圆, edge 正方形, triangle三角形, polygon五边形, image
            stroke: {
              width: 0,
              color: '#000000'
            }, //粒子边框的样式
            polygon: {
              nb_sides: 5
            }, //粒子多边形的边数
            image: {
              src: 'img/github.svg',
              width: 100,
              height: 100
            } //使用图片作为粒子的形状
          },
          opacity: {
            value: 0.5, //粒子的透明度
            random: false, //是否启用随机透明度（默认值：false）
            anim: {
              enable: false, //是否启用透明度动画（默认值：false）
              speed: 1, //透明度动画速度（默认值：1）
              opacity_min: 0.1, //随机透明度最小值（默认值：0.1）
              sync: false //是否启用透明度动画同步（默认值：false）
            }
          },
          size: {
            value: 3, //粒子的大小
            random: false, //是否启用随机大小（默认值：false）
            anim: {
              enable: true, //是否启用大小动画（默认值：false）
              speed: 40, //动画速度
              size_min: 0.1, //随机大小最小值（默认值：0）
              sync: false //是否同步动画
            }
          },
          line_linked: {
            enable: true, //是否启用连线
            distance: 150, //连线最大距离
            color: '#ffffff', //连线颜色
            opacity: 0.4, //连线透明度
            width: 1 //连线宽度
          }, //粒子间的连线配置
          move: {
            enable: true, //是否启用粒子行动
            speed: 6, //粒子行动速度
            direction: 'none', //粒子行动方向可选值（none, top, top-right, right, bottom-right, bottom, bottom-left, left, top-left）
            random: false, //是否启用粒子行动方向随机（默认值：false）
            straight: false, //是否直线移动
            out_mode: 'out', //粒子离开画布后的行为（out, bounce）
            bounce: false, //是否启用粒子间反弹
            attract: {
              enable: false, //是否启用粒子间吸引
              rotateX: 600, //粒子间吸引的X轴旋转角度
              rotateY: 1200 //粒子间吸引的Y轴旋转角度
            }
          }
        }, //定义粒子的行动
        interactivity: {
          detect_on: 'canvas',
          events: {
            onhover: {
              enable: true,
              mode: 'grab'
            },
            onclick: {
              enable: true,
              mode: 'push'
            },
            resize: true
          }, //粒子与画布的交互
          modes: {
            grab: {
              distance: 140, //抓取距离
              line_linked: {
                opacity: 1 //连线透明度
              }
            }, //鼠标悬停时的抓取效果
            bubble: {
              distance: 400, //气泡距离
              size: 40, //气泡大小
              duration: 2, //气泡持续时间
              opacity: 8, //气泡透明度
              speed: 3 //气泡速度
            }, //鼠标点击时的气泡效果
            repulse: {
              distance: 200, //排斥距离
              duration: 0.4 //排斥持续时间
            }, //鼠标点击时的排斥效果
            push: {
              particles_nb: 4 //推送的粒子数量
            }, //鼠标推送时的添加效果
            remove: {
              particles_nb: 2 //移除的粒子数量
            } //鼠标点击时的移除效果
          } //定义交互模式
        },
        retina_detect: true //是否启用视网膜检测，自动调整粒子大小以适应高分辨率屏幕。
      }
      particlesJS('particles', particlesConfig, function () {
        console.log('粒子动画特效加载成功')
      })
    },

    //清空输入框
    ClearInput() {
      this.userName = ''
    },

    //登录提交
    SubmitLogin() {
      if (!this.userName) {
        this.$message({
          message: '用户名不能为空！',
          type: 'warning'
        })
        return
      }

      if (!this.passWord) {
        this.$message({
          message: '密码不能为空！',
          type: 'warning'
        })
        return
      }
      const params = {
        // "captchaAnswer": "",
        // "captchaUUID": "",
        password: encrypt(this.passWord.trim()),
        // "password": this.passWord.trim(),
        // "rememberMe": true,//记住我
        // "userStatus": 0,//用户状态:用于后台管理直接免登录点击进来校验 默认为0 代表正常登录 1 代表免登录
        username: this.userName.trim()
      }
      this.loadingLogin = true
      if (this.actived == 'student') {
        //跳转学生端地址
        user
          .studentLogin({
            password: encrypt(this.passWord.trim()),
            username: this.userName.trim(),
            deviceType: 'PC'
          })
          .then(res => {
            this.loadingLogin = false
            if (res.code === 200) {
              let userInfo = res.data
              this.$store.dispatch('user/CLEAR_LOCAL_STORAGE') //清空本地存储
              setToken(userInfo.tokenValue)
              sessionStorage.setItem('schoolType', 1) //1:单校 2:联校// 暂时写死单校
              this.$store.dispatch('user/SET_TOKEN', userInfo.tokenValue)
              this.$store.dispatch('user/SET_SCHOOL_LOGO', userInfo.schoolLogoUrl) //设置学校logo
              this.$store.dispatch('user/SET_SCHOOL_WEB_SITE_ID', userInfo.cloudMonitorSiteId || '') //设置学校网站id
              this.$store.dispatch('user/getUserInfoByToken') //获取用户登录信息
              this.$router.push("/jointStudentAnalysisReport/list");
            
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
          .catch(err => {
            this.loadingLogin = false
            this.$message({
              message: '服务器维护中，请稍后再试。',
              type: 'warning'
            })
            console.error(err)
          })
      } else {
        user
          .loginEmailPass(params)
          .then(res => {
            this.loadingLogin = false
            if (res.code === 200) {
              console.log('打印登录结果', res)
              this.$store.dispatch('user/CLEAR_LOCAL_STORAGE') //清空本地存储
              setToken(res.data.tokenValue)

              this.$store.dispatch('user/SET_TOKEN', res.data.tokenValue)
              this.$store.dispatch('user/SET_SCHOOL_LOGO', res.data.schoolLogoUrl) //设置学校logo
              this.$store.dispatch('user/SET_SCHOOL_TYPE', res.data.schoolType) //获取用户学校类型
              this.$store.dispatch('user/SET_SCHOOL_WEB_SITE_ID', res.data.cloudMonitorSiteId || '') //设置学校网站id

              // console.log("打印学校logo",this.$store.state.user.schoolLogo);
              this.$store.dispatch('user/getUserInfoByToken').then(() => {
                console.log('获取用户登录信息成功,添加监控统计代码', this.$store.state.user.userInfo)

                //成功获取用户信息后 添加监控统计代码
                this.AddAnalyticsScript()
              }) //获取用户登录信息
              this.$store.commit('user/SET_USEAR_INFOLOGIN', res.data)
              const menuList = res.data.pcMenuVOS || []
              const permissions = res.data.permissions || []
              this.$store.commit('user/SET_PERMISSIONS', permissions)
              this.$store.commit('user/SET_MENULIST', menuList)
              if (this.remeberPassWord) {
                localStorage.setItem('userName', this.userName)
                localStorage.setItem('userPassWord', this.passWord.trim())
              } else {
                localStorage.removeItem('userName')
                localStorage.removeItem('userPassWord')
              }

              // const directUrl = this.$route.query.redirect || "/userInfo";
              if (res.data.userType == 1) {
                //临时用户 跳转到阅卷任务页  bug 4106
                const directUrl = '/examMarking/markingTasks' //闯哥：默认跳转到分析报告页面
                //后期需要根据角色 和任务来判断 老师有阅卷任务 默认跳转到阅卷页面  否则跳转到分析报告首页
                this.$router.push({ path: directUrl })
              } else {
                //正式用户 跳转到分析报告首页
                const directUrl = '/jointExamination/list' //闯哥：默认跳转到分析报告页面
                //后期需要根据角色 和任务来判断 老师有阅卷任务 默认跳转到阅卷页面  否则跳转到分析报告首页
                this.$router.push({ path: directUrl })
              }
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
          .catch(err => {
            this.loadingLogin = false
            this.$message({
              message: '服务器维护中，请稍后再试。',
              type: 'warning'
            })
            console.error(err)
          })
      }
    },

    //去往官网
    GoWebsite() {
      // window.open(this.apiUrl);
      window.location.href = this.apiUrl + '/website'
    },
    GoLogin() {
      this.tabActive = 1
    },
    //登录方式
    LoginMode(val) {
      //账号登录
      if (val == 1) {
        const container = document.getElementById('wechat-qr-container')
        if (container) {
          container.innerHTML = '' // 清空容器内容
        }
      }

      //微信登录
      if (val == 2) {
        this.$api.user.getWechatCode().then(res => {
          if (res.code == 200 && res.data) {
            this.wechatUrl = res.data
            if (window.WxLogin) {
              this.RenderWechatQRCode()
            }
          }
        })
      }
      this.tabActive = val
    },
    // 动态加载微信SDK
    LoadSdk() {
      const script = document.createElement('script')
      script.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
      document.body.appendChild(script)
    },
    // 微信二维码内置到登录窗口内
    RenderWechatQRCode() {
      const container = document.getElementById('wechat-qr-container')
      if (!container || container.children.length > 0) return // 防止重复渲染

      const queryString = this.wechatUrl.split('?')[1]?.split('#')[0]
      const urlParams = new URLSearchParams(queryString)
      const appid = urlParams.get('appid')

      const redirectUrl = this.apiUrl + '/#/wechatLogin'
      console.log('打印重新定向的地址', redirectUrl)

      new window.WxLogin({
        self_redirect: true,
        id: 'wechat-qr-container', // 容器 ID
        appid: appid, // 替换为你的微信开放平台 AppID
        scope: 'snsapi_login', // 授权作用域
        redirect_uri: encodeURIComponent(redirectUrl), // 回调 URL
        state: 'STATE', // 可选状态值
        style: 'black', // 样式风格
        stylelite: 1, // 新版二维码样式
        onReady: function (isReady) {
          console.log('微信登录组件准备就续', isReady)
        }
      })
    },
    // 微信二维码扫描登录  event 微信回调地址传递参数
    WechatLogin(event) {
      console.log('event 微信二维码中间件传递参数', event)
      let param = event.data
      if (param.type === 'wechatLoginSuccess') {
        // console.log('收到微信登录成功消息:', param.data.code)
        this.code = param.data.code
        this.$api.user
          .getLoginInfo({
            code: param.data.code
          })
          .then(res => {
            if (res.code == 200) {
              // 账号已绑定微信
              setToken(res.data.tokenValue)
              this.$store.dispatch('user/SET_TOKEN', res.data.tokenValue)
              this.$store.dispatch('user/SET_SCHOOL_LOGO', res.data.schoolLogoUrl) //设置学校logo
              this.$store.dispatch('user/SET_SCHOOL_TYPE', res.data.schoolType) //获取用户学校类型
              this.$store.dispatch('user/SET_SCHOOL_WEB_SITE_ID', res.data.cloudMonitorSiteId || '') //设置学校网站id
              this.$store.dispatch('user/getUserInfoByToken').then(() => {
                console.log('获取用户登录信息成功,添加监控统计代码', this.$store.state.user.userName)
                //成功获取用户信息后 添加监控统计代码
                this.AddAnalyticsScript()
              }) //获取用户登录信息
              this.$store.commit('user/SET_USEAR_INFOLOGIN', res.data)
              const permissions = res.data.permissions || []
              this.$store.commit('user/SET_PERMISSIONS', permissions)
              const menuList = res.data.pcMenuVOS || []
              this.$store.commit('user/SET_MENULIST', menuList)

              // const directUrl = this.$route.query.redirect || "/userInfo";

              const directUrl = '/analysisReportList/list' //闯哥：默认跳转到分析报告页面
              //后期需要根据角色 和任务来判断 老师有阅卷任务 默认跳转到阅卷页面  否则跳转到分析报告首页
              this.$router.push({ path: directUrl })
            } else if (res.code == 304) {
              // 账号没有绑定的时候，跳转绑定账号
              this.wxOpenId = res.data
              this.$message({
                message: '该微信未绑定账号，请输入账号、密码进行绑定！',
                type: 'warning'
              })
              // this.tabActive = 4
              this.LoginMode(2)
              this.showBindDialog = true
            }
          })
      }
    },
    // 扫码微信绑定账号
    BindAccount() {
      if (this.bindForm.userName.trim() == '') {
        this.$message({
          message: '请输入账号！',
          type: 'warning'
        })
        return
      }
      if (this.bindForm.passWord.trim() == '') {
        this.$message({
          message: '请输入密码！',
          type: 'warning'
        })
      }
      this.$refs.bindFormRef.validate(valid => {
        if (valid) {
          try {
            this.loadingBind = true
            user
              .loginEmailPass({
                username: this.bindForm.userName,
                password: encrypt(this.bindForm.passWord.trim()),
                wxOpenId: this.wxOpenId
              })
              .then(res => {
                if (res.code === 200) {
                  console.log('打印登录结果', res)
                  setToken(res.data.tokenValue)
                  this.$store.dispatch('user/SET_TOKEN', res.data.tokenValue)
                  this.$store.dispatch('user/SET_SCHOOL_LOGO', res.data.schoolLogoUrl) //设置学校logo
                  this.$store.dispatch('user/SET_SCHOOL_TYPE', res.data.schoolType) //获取用户学校类型
                  this.$store.dispatch('user/SET_SCHOOL_WEB_SITE_ID', res.data.cloudMonitorSiteId || '') //设置学校网站id
                  this.$store.dispatch('user/getUserInfoByToken') //获取用户登录信息
                  this.$store.commit('user/SET_USEAR_INFOLOGIN', res.data)
                  const menuList = res.data.pcMenuVOS || []

                  const permissions = res.data.permissions || []
                  this.$store.commit('user/SET_PERMISSIONS', permissions)
                  this.$store.commit('user/SET_MENULIST', menuList)

                  // const directUrl = this.$route.query.redirect || "/userInfo";
                  const directUrl = '/analysisReportList/list' //闯哥：默认跳转到分析报告页面
                  this.$router.push({ path: directUrl })
                }
              })
            this.loadingBind = false
          } catch {
            this.loadingBind = false
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
@use '@/styles/login.scss';
.login_info {
  .module_tab {
    width: 100%;
    display: flex;
    gap: 20px;
    .tab_item {
      font-weight: 600;
      font-size: 16px;
      color: #303133;
      cursor: pointer;
      padding-bottom: 4px;
      &.tab_active {
        color: #2e64fa;
        cursor: pointer;
        position: relative;
        &::after {
          position: absolute;
          content: '';
          left: 0;
          right: 0;
          top: 70%;
          height: 2px;
          background-color: #2e64fa;
        }
      }
    }
  }
}
</style>
