| | |
| | | <template> |
| | | <div class="login"> |
| | | <img class="pics1" src="src/assets/images/login-data.png"> |
| | | <img class="pics2" src="src/assets/images/login-search.png"> |
| | | <div class="login-panel"> |
| | | <div class="login-img"> |
| | | <img src="src/assets/images/loginImg.png"> |
| | | <!-- <img class="pics1" src="src/assets/images/login-data.png">--> |
| | | <!-- <img class="pics2" src="src/assets/images/login-search.png">--> |
| | | <div class="main-content"> |
| | | <div class="top"> |
| | | <div class="top-cont"> |
| | | <div class="logo blueFont">智慧安评</div> |
| | | <div class="time"> |
| | | <div> |
| | | <span>{{state.date}}</span> |
| | | <span>{{state.weekDay}}</span> |
| | | </div> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">智慧安评</h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | type="text" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="账号" |
| | | > |
| | | <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | | v-model="loginForm.password" |
| | | type="password" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="密码" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="code" v-if="captchaEnabled"> |
| | | <el-input |
| | | v-model="loginForm.code" |
| | | size="large" |
| | | auto-complete="off" |
| | | placeholder="验证码" |
| | | style="width: 63%" |
| | | @keyup.enter="handleLogin" |
| | | > |
| | | <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> |
| | | </el-input> |
| | | <div class="login-code"> |
| | | <img :src="codeUrl" @click="getCode" class="login-code-img"/> |
| | | </div> |
| | | </el-form-item> |
| | | <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px"> |
| | | <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox> |
| | | <div v-if="isRegister"> |
| | | <el-button link type="primary" @click="openRegist">立即注册</el-button> |
| | | <div> |
| | | {{state.dayTime}}好! |
| | | </div> |
| | | </div> |
| | | <el-form-item style="width:100%;"> |
| | | <el-button |
| | | :loading="loading" |
| | | size="large" |
| | | type="primary" |
| | | style="width:100%;" |
| | | @click.prevent="handleLogin" |
| | | > |
| | | <span v-if="!loading">登 录</span> |
| | | <span v-else>登 录 中...</span> |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="nav blueBg"> |
| | | <div class="nav-cont"> |
| | | <div :class="state.activeMenu == 1?'active': ''" @click="changeTab(1)"> |
| | | <HomeFilled style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>首页</div> |
| | | </div> |
| | | <div :class="state.activeMenu == 2?'active': ''" @click="changeTab(2)"> |
| | | <Comment style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>通知公告</div> |
| | | </div> |
| | | <div :class="state.activeMenu == 3?'active': ''" @click="changeTab(3)"> |
| | | <BellFilled style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>法律法规</div> |
| | | </div> |
| | | <div :class="state.activeMenu == 4?'active': ''" @click="changeTab(4)"> |
| | | <List style="width: 1em; height: 1em; margin-right: 8px" /> |
| | | <div>信息公示</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="content"> |
| | | <Home v-if="state.activeMenu==1" ref="homeRef" @toMore="changeTab"/> |
| | | <Notice v-if="state.activeMenu==2" ref="noticeRef"/> |
| | | <Laws v-if="state.activeMenu==3" ref="lawsRef"/> |
| | | <Publish v-if="state.activeMenu==4" ref="publishRef"/> |
| | | </div> |
| | | </div> |
| | | <!-- 底部 --> |
| | | <!-- <div class="el-login-footer">--> |
| | | <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>--> |
| | | <!-- </div>--> |
| | | <div class="el-login-footer"> |
| | | <span>Copyright © All Rights Reserved.</span> |
| | | </div> |
| | | <register ref="regRef"/> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue" |
| | | import { getCodeImg } from "@/api/login"; |
| | | import Cookies from "js-cookie"; |
| | | import { encrypt, decrypt } from "@/utils/jsencrypt"; |
| | | import {onMounted, ref, reactive, watch, defineAsyncComponent, nextTick, onUnmounted} from "vue" |
| | | import useUserStore from '@/store/modules/user' |
| | | import { Register } from "@/layout/components"; |
| | | import Home from './components/home' |
| | | import Notice from './components/notice' |
| | | import Laws from './components/laws' |
| | | import Publish from './components/publish' |
| | | |
| | | const userStore = useUserStore() |
| | | const route = useRoute(); |
| | | const router = useRouter(); |
| | | const { proxy } = getCurrentInstance(); |
| | | const route = useRoute() |
| | | const router = useRouter() |
| | | // 时间格式化 |
| | | const timeForm = { |
| | | hour12: false, |
| | | year: 'numeric', |
| | | month: '2-digit', |
| | | day: '2-digit', |
| | | hour: '2-digit', |
| | | minute: '2-digit', |
| | | second: '2-digit' |
| | | } |
| | | |
| | | const loginForm = ref({ |
| | | username: "admin", |
| | | password: "Admin@123.com", |
| | | rememberMe: false, |
| | | code: "", |
| | | uuid: "" |
| | | }); |
| | | const homeRef = ref(null) |
| | | const noticeRef = ref(null) |
| | | const lawsRef = ref(null) |
| | | const publishRef = ref(null) |
| | | |
| | | const loginRules = { |
| | | username: [{ required: true, trigger: "blur", message: "请输入您的账号" }], |
| | | password: [{ required: true, trigger: "blur", message: "请输入您的密码" }], |
| | | code: [{ required: true, trigger: "change", message: "请输入验证码" }] |
| | | const state = reactive({ |
| | | activeMenu: 1, |
| | | date: '', |
| | | weekDay: '', |
| | | dayTime: '' |
| | | }) |
| | | |
| | | // 当前时间 |
| | | const getDateTime = () => { |
| | | const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); |
| | | console.log(curTime,'time') |
| | | state.date = curTime.slice(0, 10); |
| | | let week = ['日', '一', '二', '三', '四', '五', '六']; |
| | | let day = new Date().getDay(); |
| | | state.weekDay = '星期' + week[day]; |
| | | let curHour = Number(curTime.slice(10, 13)); |
| | | if (curHour >= 5 && curHour <= 10) { |
| | | state.dayTime = '上午'; |
| | | } |
| | | if (curHour > 10 && curHour <= 12) { |
| | | state.dayTime = '中午'; |
| | | } |
| | | if (curHour > 12 && curHour <= 18) { |
| | | state.dayTime = '下午'; |
| | | } |
| | | if (curHour > 18 && curHour <= 22) { |
| | | state.dayTime = '晚上'; |
| | | } |
| | | if (curHour > 22) { |
| | | state.dayTime = '午夜'; |
| | | } |
| | | }; |
| | | |
| | | const codeUrl = ref(""); |
| | | const loading = ref(false); |
| | | const regRef = ref(null) |
| | | // 验证码开关 |
| | | const captchaEnabled = ref(true); |
| | | // 注册开关 |
| | | const isRegister = ref(true); |
| | | |
| | | const redirect = ref(undefined); |
| | | |
| | | onMounted(()=>{ |
| | | |
| | | getDateTime(); |
| | | }) |
| | | |
| | | const openRegist = ()=>{ |
| | | regRef.value.dialogVisible = true |
| | | } |
| | | onUnmounted(()=>{ |
| | | |
| | | }) |
| | | |
| | | watch(route, (newRoute) => { |
| | | redirect.value = newRoute.query && newRoute.query.redirect; |
| | | }, { immediate: true }); |
| | | |
| | | function handleLogin() { |
| | | proxy.$refs.loginRef.validate(valid => { |
| | | if (valid) { |
| | | loading.value = true; |
| | | // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码 |
| | | if (loginForm.value.rememberMe) { |
| | | Cookies.set("username", loginForm.value.username, { expires: 30 }); |
| | | Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 }); |
| | | Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 }); |
| | | } else { |
| | | // 否则移除 |
| | | Cookies.remove("username"); |
| | | Cookies.remove("password"); |
| | | Cookies.remove("rememberMe"); |
| | | } |
| | | // 调用action的登录方法 |
| | | userStore.login(loginForm.value).then(() => { |
| | | const query = route.query; |
| | | const otherQueryParams = Object.keys(query).reduce((acc, cur) => { |
| | | if (cur !== "redirect") { |
| | | acc[cur] = query[cur]; |
| | | } |
| | | return acc; |
| | | }, {}); |
| | | router.push({ path: redirect.value || "/", query: otherQueryParams }); |
| | | }).catch(() => { |
| | | loading.value = false; |
| | | // 重新获取验证码 |
| | | if (captchaEnabled.value) { |
| | | getCode(); |
| | | } |
| | | }); |
| | | } |
| | | }); |
| | | const changeTab=(num)=>{ |
| | | state.activeMenu = num |
| | | console.log(state.activeMenu) |
| | | // if(num == 1){ |
| | | // homeRef.value.getNoticeList() |
| | | // homeRef.value.getLawsList() |
| | | // homeRef.value.getPubList() |
| | | // } |
| | | // if(num == 2){ |
| | | // noticeRef.value.getData() |
| | | // } |
| | | // if(num == 3){ |
| | | // lawsRef.value.getData() |
| | | // } |
| | | // if(num == 4){ |
| | | // publishRef.value.getData() |
| | | // } |
| | | } |
| | | |
| | | function getCode() { |
| | | getCodeImg().then(res => { |
| | | captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; |
| | | if (captchaEnabled.value) { |
| | | codeUrl.value = "data:image/gif;base64," + res.img; |
| | | loginForm.value.uuid = res.uuid; |
| | | } |
| | | }); |
| | | } |
| | | |
| | | function getCookie() { |
| | | const username = Cookies.get("username"); |
| | | const password = Cookies.get("password"); |
| | | const rememberMe = Cookies.get("rememberMe"); |
| | | loginForm.value = { |
| | | username: username === undefined ? loginForm.value.username : username, |
| | | password: password === undefined ? loginForm.value.password : decrypt(password), |
| | | rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) |
| | | }; |
| | | } |
| | | |
| | | getCode(); |
| | | getCookie(); |
| | | </script> |
| | | |
| | | <style lang='scss' scoped> |
| | | .login { |
| | | width: 100%; |
| | | display: flex; |
| | | position: relative; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 100%; |
| | | background-image: url("../assets/images/login-bg.jpg"); |
| | | |
| | | .main-content{ |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | color: #333; |
| | | |
| | | .top{ |
| | | width: 100%; |
| | | background: rgba(249,250,251,1); |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | .top-cont{ |
| | | width: 1200px; |
| | | height: 90px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin: 0 auto; |
| | | |
| | | .logo{ |
| | | font-size: 2rem; |
| | | font-weight: 800; |
| | | height: 90px; |
| | | line-height: 90px; |
| | | font-family: "PingFang SC"; |
| | | } |
| | | |
| | | .time{ |
| | | font-size: 16px; |
| | | height: 90px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | span{ |
| | | &:first-of-type{ |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | .nav{ |
| | | width: 100%; |
| | | height: 80px; |
| | | position: fixed; |
| | | top: 90px; |
| | | left: 0; |
| | | .nav-cont{ |
| | | width: 1200px; |
| | | height: 80px; |
| | | margin: 0 auto; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: left; |
| | | |
| | | &>div{ |
| | | height: 100%; |
| | | padding: 0 50px; |
| | | color: #ffffff; |
| | | background-color: #5175C0; |
| | | font-size: 20px; |
| | | text-decoration: none; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | cursor: pointer; |
| | | |
| | | &:hover{ |
| | | background: #425f9f; |
| | | } |
| | | } |
| | | .active{ |
| | | background: #425f9f; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .pics1{ |
| | | position: absolute; |
| | |
| | | left: 20px; |
| | | opacity: 0.5; |
| | | } |
| | | .title { |
| | | margin: 0px auto 30px auto; |
| | | text-align: center; |
| | | color: #333; |
| | | font-size: 1.4rem; |
| | | } |
| | | .login-panel{ |
| | | border-radius: 1.2rem; |
| | | background: #ffffff; |
| | | width: 800px; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | transform: translateY(-20%); |
| | | box-shadow: 15px 15px 30px rgba(0,0,0,.1); |
| | | } |
| | | .login-img{ |
| | | flex: 1; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | img{ |
| | | width: 80%; |
| | | } |
| | | } |
| | | .login-form { |
| | | flex: 1; |
| | | padding: 25px; |
| | | .el-input { |
| | | height: 44px; |
| | | input { |
| | | height: 44px; |
| | | } |
| | | } |
| | | .input-icon { |
| | | height: 39px; |
| | | width: 14px; |
| | | margin-left: 0px; |
| | | } |
| | | } |
| | | .login-tip { |
| | | font-size: 13px; |
| | | text-align: center; |
| | | color: #bfbfbf; |
| | | } |
| | | .login-code { |
| | | width: 33%; |
| | | height: 40px; |
| | | float: right; |
| | | img { |
| | | cursor: pointer; |
| | | vertical-align: middle; |
| | | } |
| | | } |
| | | |
| | | .el-form-item--default{ |
| | | margin-bottom: 24px; |
| | | } |
| | | |
| | | ::v-deep(.el-form-item__content){ |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .el-login-footer { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | height: 60px; |
| | | line-height: 60px; |
| | | position: fixed; |
| | | bottom: 0; |
| | | width: 100%; |
| | | text-align: center; |
| | | color: #fff; |
| | | font-family: Arial; |
| | | background: #5175C0; |
| | | font-family: "PingFang SC"; |
| | | font-size: 12px; |
| | | letter-spacing: 1px; |
| | | } |
| | | .login-code-img { |
| | | height: 40px; |
| | | padding-left: 12px; |
| | | } |
| | | </style> |