From 99d349889a704692e5ef81ca8e077a33121eaece Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 05 七月 2022 10:30:13 +0800
Subject: [PATCH] '更新'
---
src/views/loginPage/loginPage.vue | 237 +++++++-------
src/assets/loginPage/login-bg.jpg | 0
src/assets/menu/bg_home1.jpg | 0
src/views/loginPage/component/accountLogin.vue | 320 ++++++++++----------
src/views/homeMenu/homeMenu.vue | 396 ++++++++++++------------
src/assets/loginPage/login-bg.png | 0
6 files changed, 477 insertions(+), 476 deletions(-)
diff --git a/src/assets/loginPage/login-bg.jpg b/src/assets/loginPage/login-bg.jpg
new file mode 100644
index 0000000..6427cb6
--- /dev/null
+++ b/src/assets/loginPage/login-bg.jpg
Binary files differ
diff --git a/src/assets/loginPage/login-bg.png b/src/assets/loginPage/login-bg.png
new file mode 100644
index 0000000..71fd539
--- /dev/null
+++ b/src/assets/loginPage/login-bg.png
Binary files differ
diff --git a/src/assets/menu/bg_home1.jpg b/src/assets/menu/bg_home1.jpg
new file mode 100644
index 0000000..b4389fb
--- /dev/null
+++ b/src/assets/menu/bg_home1.jpg
Binary files differ
diff --git a/src/views/homeMenu/homeMenu.vue b/src/views/homeMenu/homeMenu.vue
index 79c6862..2dea8a3 100644
--- a/src/views/homeMenu/homeMenu.vue
+++ b/src/views/homeMenu/homeMenu.vue
@@ -3,9 +3,9 @@
<div class="topPanel">
<div class="topPanelCont">
<div class="topTit">
- <div>新疆国泰新华安</div>
+ <div>新疆国泰新华</div>
<span></span>
- <div>全风险预警监测系统</div>
+ <div>安全风险预警监测系统</div>
</div>
<div class="userInfo">
<div class="avator">
@@ -20,7 +20,7 @@
<div class="menuGrid">
<div class="gridCont">
- <el-row :gutter="16">
+ <el-row :gutter="20">
<el-col :span="6"><div class="grid-content" @click="renderMenu('2')"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col>
<el-col :span="6"><div class="grid-content" @click="renderMenu('3')"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
<el-col :span="6"><div class="grid-content" @click="renderMenu('4')"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col>
@@ -34,13 +34,13 @@
</div>
</el-col>
</el-row>
- <el-row :gutter="16">
+ <el-row :gutter="20">
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('6')"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col>
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('7')"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col>
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('8')"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col>
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('9')"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col>
</el-row>
- <el-row :gutter="16">
+ <el-row :gutter="20">
<el-col :span="6"><div class="grid-content grid-content-3" @click="renderMenu('10')"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col>
<el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('11')"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col>
<el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('1')"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col>
@@ -51,227 +51,227 @@
</template>
<script lang="ts">
-import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import logoMini from '/@/assets/logo-mini.svg';
-import loginIconTwo from '/@/assets/login-icon-two.svg';
-import { NextLoading } from '/@/utils/loading';
-import {Session} from "/@/utils/storage";
-import {useRoute, useRouter} from "vue-router";
-import {initBackEndControlRoutes} from "/@/router/backEnd";
-import {useUserInfo} from "/@/stores/userInfo";
+ import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { useThemeConfig } from '/@/stores/themeConfig';
+ import logoMini from '/@/assets/logo-mini.svg';
+ import loginIconTwo from '/@/assets/login-icon-two.svg';
+ import { NextLoading } from '/@/utils/loading';
+ import {Session} from "/@/utils/storage";
+ import {useRoute, useRouter} from "vue-router";
+ import {initBackEndControlRoutes} from "/@/router/backEnd";
+ import {useUserInfo} from "/@/stores/userInfo";
-// 定义接口来定义对象的类型
-interface LoginState {
- tabsActiveName: string;
- isScan: boolean;
-}
+ // 定义接口来定义对象的类型
+ interface LoginState {
+ tabsActiveName: string;
+ isScan: boolean;
+ }
-export default defineComponent({
- name: 'loginIndex',
- components: {},
- setup() {
- const route = useRoute();
- const router = useRouter();
- const userInfo = useUserInfo()
- const { userInfos } = storeToRefs(userInfo);
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const state = reactive<LoginState>({
- tabsActiveName: 'account',
- isScan: false,
- });
- // 获取布局配置信息
- const getThemeConfig = computed(() => {
- return themeConfig.value;
- });
- // 下拉菜单点击时
- const onLoginOut = () => {
- console.log('退出登录')
- };
- const renderMenu = async (value: string) => {
- Session.set('projectId',value)
- userInfos.value.projectId = value
- await initBackEndControlRoutes();
- router.push('./')
- };
- //点击进入特殊作业
- const toSpecialWorkSys = () => {
- router.push('/workReservation');
- };
- // 页面加载时
- onMounted(() => {
- NextLoading.done();
- // loginBg();
- // loginApp()
- });
- return {
- logoMini,
- loginIconTwo,
- getThemeConfig,
- renderMenu,
- toSpecialWorkSys,
- ...toRefs(state),
- };
- },
-});
+ export default defineComponent({
+ name: 'loginIndex',
+ components: {},
+ setup() {
+ const route = useRoute();
+ const router = useRouter();
+ const userInfo = useUserInfo()
+ const { userInfos } = storeToRefs(userInfo);
+ const storesThemeConfig = useThemeConfig();
+ const { themeConfig } = storeToRefs(storesThemeConfig);
+ const state = reactive<LoginState>({
+ tabsActiveName: 'account',
+ isScan: false,
+ });
+ // 获取布局配置信息
+ const getThemeConfig = computed(() => {
+ return themeConfig.value;
+ });
+ // 下拉菜单点击时
+ const onLoginOut = () => {
+ console.log('退出登录')
+ };
+ const renderMenu = async (value: string) => {
+ Session.set('projectId',value)
+ userInfos.value.projectId = value
+ await initBackEndControlRoutes();
+ router.push('/home')
+ };
+ //点击进入特殊作业
+ const toSpecialWorkSys = () => {
+ router.push('/layoutPage');
+ };
+ // 页面加载时
+ onMounted(() => {
+ NextLoading.done();
+ // loginBg();
+ // loginApp()
+ });
+ return {
+ logoMini,
+ loginIconTwo,
+ getThemeConfig,
+ renderMenu,
+ toSpecialWorkSys,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
<style scoped lang="scss">
-.login-container {
- width: 100%;
- height: 100%;
- position: relative;
- background: url("../../assets/menu/bg_home.jpg") no-repeat center;
- .topPanel{
- position: absolute;
+ .login-container {
width: 100%;
- top: -100px;
- left: 0;
- height:100px;
- background: #fff;
- display: flex;
- justify-content: center;
- box-shadow: 0 8px 32px rgba(0,0,0,.1);
- animation: showDown .6s 1 ease forwards;
-
- @keyframes showDown {
- 100%{
- position: absolute;
- top: 0;
- }
- }
- .topPanelCont{
- width: 1200px;
- height: 100%;
+ height: 100%;
+ position: relative;
+ background: url("../../assets/menu/bg_home1.jpg") no-repeat center;
+ .topPanel{
+ position: absolute;
+ width: 100%;
+ top: -100px;
+ left: 0;
+ height:100px;
+ background: #fff;
display: flex;
- align-items: center;
- justify-content: space-between;
+ justify-content: center;
+ box-shadow: 0 8px 32px rgba(0,0,0,.1);
+ animation: showDown .6s 1 ease forwards;
- .topTit{
- font-size: 24px;
- font-weight: bold;
- display: flex;
- align-items: center;
- color: #333;
- line-height: 28px;
-
- &>div:last-of-type{
- color: #006DF5;
- }
-
- span{
- width: 1px;
- height: 28px;
- background: #999;
- margin: 0 15px;
+ @keyframes showDown {
+ 100%{
+ position: absolute;
+ top: 0;
}
}
-
- .userInfo{
+ .topPanelCont{
+ width: 1200px;
+ height: 100%;
display: flex;
align-items: center;
+ justify-content: space-between;
- .avator{
+ .topTit{
+ font-size: 24px;
+ font-weight: bold;
display: flex;
- justify-content: right;
-
- img{
- width: 20px;
- height: 20px;
- border-radius: 10px;
- }
- div{
- font-size: 15px;
- color: #333333;
- line-height: 20px;
- margin-left: 6px;
- }
- }
- span{
- width: 1px;
- height: 20px;
- background: #999;
- margin: 0 15px;
- }
- .loginOut{
- font-size: 15px;
+ align-items: center;
color: #333;
- line-height: 20px;
- cursor: pointer;
+ line-height: 28px;
- &:hover{
+ &>div:last-of-type{
color: #006DF5;
}
+
+ span{
+ width: 1px;
+ height: 28px;
+ background: #999;
+ margin: 0 15px;
+ }
+ }
+
+ .userInfo{
+ display: flex;
+ align-items: center;
+
+ .avator{
+ display: flex;
+ justify-content: right;
+
+ img{
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ }
+ div{
+ font-size: 15px;
+ color: #333333;
+ line-height: 20px;
+ margin-left: 6px;
+ }
+ }
+ span{
+ width: 1px;
+ height: 20px;
+ background: #999;
+ margin: 0 15px;
+ }
+ .loginOut{
+ font-size: 15px;
+ color: #333;
+ line-height: 20px;
+ cursor: pointer;
+
+ &:hover{
+ color: #006DF5;
+ }
+ }
}
}
}
- }
- .menuGrid{
- width: 100%;
- position: absolute;
- top: 150px;
- display: flex;
- justify-content: center;
- .gridCont{
- width: 1200px;
- .el-row {
- margin-bottom: 16px;
- }
- .el-row:last-child {
- margin-bottom: 0;
- }
- .el-col {
- border-radius: 8px;
- }
-
- .grid-content {
- border-radius: 8px;
- height: 234px;
- padding: 32px;
- position: relative;
- background-image: linear-gradient(135deg,#00C0F5,#147AEA);
- overflow: hidden;
- cursor: pointer;
- transition: .3s;
- border: none;
-
- &:hover{
- box-shadow: 0 8px 32px rgba(20,97,234,.4);
+ .menuGrid{
+ width: 100%;
+ position: absolute;
+ top: 150px;
+ display: flex;
+ justify-content: center;
+ .gridCont{
+ width: 1200px;
+ .el-row {
+ margin-bottom: 20px;
+ }
+ .el-row:last-child {
+ margin-bottom: 0;
+ }
+ .el-col {
+ border-radius: 8px;
}
- .itemTit{
- font-size: 24px;
- line-height: 36px;
- height: 40%;
- font-family: "PingFang SC";
- font-weight: lighter;
- color: #fff;
- margin-bottom: 25px;
- }
- .iconImg{
- width: 80px;
- height: 80px;
+ .grid-content {
+ border-radius: 10px;
+ height: 234px;
+ padding: 32px;
+ position: relative;
+ background-image: linear-gradient(135deg,#00C0F5,#44b1ff);
+ overflow: hidden;
+ cursor: pointer;
+ transition: .3s;
+ border: none;
+
+ &:hover{
+ box-shadow: 0 8px 32px rgba(20,97,234,.4);
+ }
+
+ .itemTit{
+ font-size: 24px;
+ line-height: 36px;
+ height: 40%;
+ font-family: "PingFang SC";
+ font-weight: lighter;
+ color: #fff;
+ margin-bottom: 25px;
+ }
+ .iconImg{
+ width: 80px;
+ height: 80px;
+ }
+
+ .bgImg{
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
}
- .bgImg{
- position: absolute;
- right: 0;
- bottom: 0;
- }
+ /*.grid-content-2{*/
+ /* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
+ /*}*/
+
+ /*.grid-content-3{*/
+ /* background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
+ /*}*/
}
- .grid-content-2{
- background-image: linear-gradient(135deg,#0098F5,#1461EA);
- }
-
- .grid-content-3{
- background-image: linear-gradient(135deg,#006DF5,#1450EA);
- }
}
-
}
-}
</style>
diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index d477fa1..c8a4242 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -9,20 +9,20 @@
</el-form-item>
<el-form-item class="login-animation2">
<el-input
- :type="isShowPassword ? 'text' : 'password'"
- :placeholder="$t('message.account.accountPlaceholder2')"
- v-model="ruleForm.password"
- autocomplete="off"
- size="large"
+ :type="isShowPassword ? 'text' : 'password'"
+ :placeholder="$t('message.account.accountPlaceholder2')"
+ v-model="ruleForm.password"
+ autocomplete="off"
+ size="large"
>
<template #prefix>
<el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px;height: 24px"></el-icon>
</template>
<template #suffix>
<i
- class="iconfont el-input__icon login-content-password"
- :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
- @click="isShowPassword = !isShowPassword"
+ class="iconfont el-input__icon login-content-password"
+ :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
+ @click="isShowPassword = !isShowPassword"
>
</i>
</template>
@@ -41,167 +41,167 @@
</template>
<script lang="ts">
-import { toRefs, reactive, defineComponent, computed } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import { useI18n } from 'vue-i18n';
-import Cookies from 'js-cookie';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import { initFrontEndControlRoutes } from '/@/router/frontEnd';
-import { initBackEndControlRoutes } from '/@/router/backEnd';
-import { Session } from '/@/utils/storage';
-import { formatAxis } from '/@/utils/formatTime';
-import { NextLoading } from '/@/utils/loading';
-import { useLoginApi } from '/@/api/login';
-import {useUserInfo} from "/@/stores/userInfo";
+ import { toRefs, reactive, defineComponent, computed } from 'vue';
+ import { useRoute, useRouter } from 'vue-router';
+ import { ElMessage } from 'element-plus';
+ import { useI18n } from 'vue-i18n';
+ import Cookies from 'js-cookie';
+ import { storeToRefs } from 'pinia';
+ import { useThemeConfig } from '/@/stores/themeConfig';
+ import { initFrontEndControlRoutes } from '/@/router/frontEnd';
+ import { initBackEndControlRoutes } from '/@/router/backEnd';
+ import { Session } from '/@/utils/storage';
+ import { formatAxis } from '/@/utils/formatTime';
+ import { NextLoading } from '/@/utils/loading';
+ import { useLoginApi } from '/@/api/login';
+ import {useUserInfo} from "/@/stores/userInfo";
-export default defineComponent({
- name: 'accountLogin',
- setup() {
- const { t } = useI18n();
- const userInfo = useUserInfo()
- const route = useRoute();
- const router = useRouter();
- const state = reactive({
- isShowPassword: false,
- ruleForm: {
- username: 'admin',
- password: '123456',
- },
- loading: {
- signIn: false,
- },
- });
- // 时间获取
- const currentTime = computed(() => {
- return formatAxis(new Date());
- });
- // 登录
- const onSignIn = async () => {
- state.loading.signIn = true;
- // 存储 token 到浏览器缓存
- let res = await useLoginApi().signIn(state.ruleForm)
- if(res.data.code === '200'){
- userInfo.setUserInfos(res.data.data)
- Session.set('token', res.data.data.accessToken);
- Session.set('projectId','');
- Session.set('uid',res.data.data.uid);
- signInSuccess();
- }else{
- state.loading.signIn = false
- ElMessage({
- type:'warning',
- message:res.data.msg
- })
- }
- // Session.set('token', Math.random().toString(36).substr(0));
- // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
- // Cookies.set('userName', state.ruleForm.username);
- // if (!themeConfig.value.isRequestRoutes) {
- // // 前端控制路由，2、请注意执行顺序
- // await initFrontEndControlRoutes();
- // signInSuccess();
- // } else {
- // // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
- // // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
- // await initBackEndControlRoutes();
- // // 执行完 initBackEndControlRoutes，再执行 signInSuccess
- // signInSuccess();
- // }
- };
- // 登录成功后的跳转
- const signInSuccess = async () => {
- // 初始化登录成功时间问候语
- let currentTimeInfo = currentTime.value;
- // 登录成功，跳到转首页
- // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
- if (route.query?.redirect) {
- router.push('/homeMenu');
- // router.push({
- // path: <string>route.query?.redirect,
- // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
- // });
- } else {
- router.push('/loginPage');
- }
- state.loading.signIn = true;
- const signInText = t('message.signInText');
- ElMessage.success(`${currentTimeInfo}，${signInText}`);
- // 登录成功提示
- // 关闭 loading
- // 添加 loading，防止第一次进入界面时出现短暂空白
- // NextLoading.start();
- };
- return {
- onSignIn,
- ...toRefs(state),
- };
- },
-});
+ export default defineComponent({
+ name: 'accountLogin',
+ setup() {
+ const { t } = useI18n();
+ const userInfo = useUserInfo()
+ const route = useRoute();
+ const router = useRouter();
+ const state = reactive({
+ isShowPassword: false,
+ ruleForm: {
+ username: 'admin',
+ password: '123456',
+ },
+ loading: {
+ signIn: false,
+ },
+ });
+ // 时间获取
+ const currentTime = computed(() => {
+ return formatAxis(new Date());
+ });
+ // 登录
+ const onSignIn = async () => {
+ state.loading.signIn = true;
+ // 存储 token 到浏览器缓存
+ let res = await useLoginApi().signIn(state.ruleForm)
+ if(res.data.code === '200'){
+ userInfo.setUserInfos(res.data.data)
+ Session.set('token', res.data.data.accessToken);
+ Session.set('projectId','');
+ Session.set('uid',res.data.data.uid);
+ signInSuccess();
+ }else{
+ state.loading.signIn = false
+ ElMessage({
+ type:'warning',
+ message:res.data.msg
+ })
+ }
+ // Session.set('token', Math.random().toString(36).substr(0));
+ // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
+ // Cookies.set('userName', state.ruleForm.username);
+ // if (!themeConfig.value.isRequestRoutes) {
+ // // 前端控制路由，2、请注意执行顺序
+ // await initFrontEndControlRoutes();
+ // signInSuccess();
+ // } else {
+ // // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
+ // // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
+ // await initBackEndControlRoutes();
+ // // 执行完 initBackEndControlRoutes，再执行 signInSuccess
+ // signInSuccess();
+ // }
+ };
+ // 登录成功后的跳转
+ const signInSuccess = async () => {
+ // 初始化登录成功时间问候语
+ let currentTimeInfo = currentTime.value;
+ // 登录成功，跳到转首页
+ // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
+ if (route.query?.redirect) {
+ router.push('/homeMenu');
+ // router.push({
+ // path: <string>route.query?.redirect,
+ // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
+ // });
+ } else {
+ router.push('/loginPage');
+ }
+ state.loading.signIn = true;
+ const signInText = t('message.signInText');
+ ElMessage.success(`${currentTimeInfo}，${signInText}`);
+ // 登录成功提示
+ // 关闭 loading
+ // 添加 loading，防止第一次进入界面时出现短暂空白
+ // NextLoading.start();
+ };
+ return {
+ onSignIn,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
<style scoped lang="scss">
-.login-content-form {
- margin-top: 40px;
- width: 420px;
+ .login-content-form {
+ margin-top: 40px;
+ width: 420px;
- .el-input::v-deep .el-input__wrapper{
- height: 56px;
- border-radius: 28px;
- padding: 0 30px;
- background: #F2F2F2;
- &:focus-within{
- border: 1px solid #2053D7;
+ .el-input::v-deep .el-input__wrapper{
+ height: 56px;
+ border-radius: 28px;
+ padding: 0 30px;
+ background: #F2F2F2;
+ &:focus-within{
+ border: 1px solid #2053D7;
+ }
}
- }
- @for $i from 1 through 4 {
- .login-animation#{$i} {
- opacity: 0;
- animation-name: error-num;
- animation-duration: 0.5s;
- animation-fill-mode: forwards;
- animation-delay: calc($i/10) + s;
+ @for $i from 1 through 4 {
+ .login-animation#{$i} {
+ opacity: 0;
+ animation-name: error-num;
+ animation-duration: 0.5s;
+ animation-fill-mode: forwards;
+ animation-delay: calc($i/10) + s;
+ }
}
- }
- .codeDeal::v-deep .el-form-item__content{
- display: flex;
- justify-content: space-between;
+ .codeDeal::v-deep .el-form-item__content{
+ display: flex;
+ justify-content: space-between;
- .forgetCode{
- color: #2053D7;
+ .forgetCode{
+ color: #2053D7;
+ cursor: pointer;
+ }
+ }
+ .login-content-password {
+ width: 100%;
+ display: inline-block;
+ width: 20px;
cursor: pointer;
+ &:hover {
+ color: #909399;
+ }
+ }
+ .login-content-code {
+ width: 100%;
+ padding: 0;
+ font-weight: bold;
+ letter-spacing: 5px;
+ }
+ .login-content-submit {
+ width: 100%;
+ height: 56px;
+ font-size: 16px;
+ border-radius: 28px;
+ letter-spacing: 4px;
+ font-weight: 300;
+ margin-top: 15px;
+ background: #2053D7;
+ transition: .3s;
+ &:hover{
+ letter-spacing: 6px;
+ background: #4E7AEC;
+ }
}
}
- .login-content-password {
- width: 100%;
- display: inline-block;
- width: 20px;
- cursor: pointer;
- &:hover {
- color: #909399;
- }
- }
- .login-content-code {
- width: 100%;
- padding: 0;
- font-weight: bold;
- letter-spacing: 5px;
- }
- .login-content-submit {
- width: 100%;
- height: 56px;
- font-size: 16px;
- border-radius: 28px;
- letter-spacing: 4px;
- font-weight: 300;
- margin-top: 15px;
- background: #2053D7;
- transition: .3s;
- &:hover{
- letter-spacing: 6px;
- background: #4E7AEC;
- }
- }
-}
</style>
diff --git a/src/views/loginPage/loginPage.vue b/src/views/loginPage/loginPage.vue
index 66c68bc..a2e26c0 100644
--- a/src/views/loginPage/loginPage.vue
+++ b/src/views/loginPage/loginPage.vue
@@ -12,9 +12,9 @@
<div class="loginPanel">
<div class="welc">WELCOME！</div>
<div class="welcc">欢迎登录</div>
-<!-- <div class="loginInfo">-->
-<!-- <el-input v-model="input" placeholder="Please input" />-->
-<!-- </div>-->
+ <!-- <div class="loginInfo">-->
+ <!-- <el-input v-model="input" placeholder="Please input" />-->
+ <!-- </div>-->
<div>
<el-tabs v-model="tabsActiveName">
<AccountLogin />
@@ -27,134 +27,135 @@
</template>
<script lang="ts">
-import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useThemeConfig } from '/@/stores/themeConfig';
-import logoMini from '/@/assets/logo-mini.svg';
-import loginIconTwo from '/@/assets/login-icon-two.svg';
-import { NextLoading } from '/@/utils/loading';
-import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
-import { loginBg } from '../../../static/loginPage.js/login.js'
-import { loginApp } from '../../../static/loginPage.js/loginApp.js'
+ import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
+ import { storeToRefs } from 'pinia';
+ import { useThemeConfig } from '/@/stores/themeConfig';
+ import logoMini from '/@/assets/logo-mini.svg';
+ import loginIconTwo from '/@/assets/login-icon-two.svg';
+ import { NextLoading } from '/@/utils/loading';
+ import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
+ import { loginBg } from '../../../static/loginPage.js/login.js'
+ import { loginApp } from '../../../static/loginPage.js/loginApp.js'
-// 定义接口来定义对象的类型
-interface LoginState {
- tabsActiveName: string;
- isScan: boolean;
-}
+ // 定义接口来定义对象的类型
+ interface LoginState {
+ tabsActiveName: string;
+ isScan: boolean;
+ }
-export default defineComponent({
- name: 'loginIndex',
- components: { AccountLogin },
- setup() {
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const state = reactive<LoginState>({
- tabsActiveName: 'account',
- isScan: false,
- });
- // 获取布局配置信息
- const getThemeConfig = computed(() => {
- return themeConfig.value;
- });
- // 页面加载时
- onMounted(() => {
- NextLoading.done();
- loginBg();
- loginApp()
- });
- return {
- logoMini,
- loginIconTwo,
- getThemeConfig,
- ...toRefs(state),
- };
- },
-});
+ export default defineComponent({
+ name: 'loginIndex',
+ components: { AccountLogin },
+ setup() {
+ const storesThemeConfig = useThemeConfig();
+ const { themeConfig } = storeToRefs(storesThemeConfig);
+ const state = reactive<LoginState>({
+ tabsActiveName: 'account',
+ isScan: false,
+ });
+ // 获取布局配置信息
+ const getThemeConfig = computed(() => {
+ return themeConfig.value;
+ });
+ // 页面加载时
+ onMounted(() => {
+ NextLoading.done();
+ loginBg();
+ loginApp()
+ });
+ return {
+ logoMini,
+ loginIconTwo,
+ getThemeConfig,
+ ...toRefs(state),
+ };
+ },
+ });
</script>
<style scoped lang="scss">
-.login-container {
- width: 100%;
- height: 100%;
- position: relative;
- z-index: 999;
- display: flex;
- align-items: center;
- justify-content: center;
- background-image: radial-gradient(at center, #0075c3, #000b61);
-
- canvas {
- display: block;
- vertical-align: bottom;
- }
-
- #particles-js {
+ .login-container {
width: 100%;
height: 100%;
-
- background-size: cover;
- background-position: 50% 50%;
- background-repeat: no-repeat;
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
-
- .loginContent{
- width: 100%;
- padding: 0 300px;
+ position: relative;
+ z-index: 999;
display: flex;
- align-items: flex-start;
- justify-content: space-between;
+ align-items: center;
+ justify-content: center;
+ background: url("../../assets/loginPage/login-bg.jpg") no-repeat center;
+ /*background-image: radial-gradient(at center, #0075c3, #000b61);*/
- .loginContL{
- font-size: 48px;
- font-weight: bold;
- padding-top: 20px;
- margin-right: 30px;
-
- .apTitleT{
- color: #fff;
- margin-bottom: 20px;
- letter-spacing: 4px;
- }
- .apTitleB{
- color: #01d0ff;
- margin-bottom: 40px;
- letter-spacing: 4px;
- }
- &>span{
- display: block;
- width: 120px;
- height: 8px;
- background: #01d0ff;
- }
+ canvas {
+ display: block;
+ vertical-align: bottom;
}
- .loginPanel{
- padding: 85px 70px;
- background: #fff;
- border-radius: 15px;
- box-shadow: 0 8px 40px rgba(0,0,0,.15);
- .welc{
- font-size: 36px;
- font-family: "PingFang SC";
- font-weight: normal;
- color: #999999;
- letter-spacing: 2px;
- margin-bottom: 15px;
+ #particles-js {
+ width: 100%;
+ height: 100%;
+
+ background-size: cover;
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .loginContent{
+ width: 100%;
+ padding: 0 300px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+
+ .loginContL{
+ font-size: 48px;
+ font-weight: bold;
+ padding-top: 80px;
+ margin-right: 30px;
+
+ .apTitleT{
+ color: #fff;
+ margin-bottom: 20px;
+ letter-spacing: 4px;
+ }
+ .apTitleB{
+ color: #01d0ff;
+ margin-bottom: 40px;
+ letter-spacing: 4px;
+ }
+ &>span{
+ display: block;
+ width: 120px;
+ height: 8px;
+ background: #01d0ff;
+ }
}
- .welcc{
- font-size: 32px;
- font-family: "PingFang SC";
- font-weight: lighter;
- color: #333;
- letter-spacing: 2px;
+ .loginPanel{
+ padding: 85px 70px;
+ background: #fff;
+ border-radius: 15px;
+ box-shadow: 0 8px 40px rgba(0,0,0,.15);
+
+ .welc{
+ font-size: 36px;
+ font-family: "PingFang SC";
+ font-weight: normal;
+ color: #999999;
+ letter-spacing: 2px;
+ margin-bottom: 15px;
+ }
+ .welcc{
+ font-size: 32px;
+ font-family: "PingFang SC";
+ font-weight: lighter;
+ color: #333;
+ letter-spacing: 2px;
+ }
}
}
}
-}
</style>
--
Gitblit v1.9.2