@@ -5,6 +5,8 @@ | |||
} | |||
body { | |||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; | |||
// font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; | |||
// font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif; | |||
font-size: $--font-size-base; | |||
line-height: $base--line-height; | |||
color: $--color-text-primary; | |||
@@ -15,8 +17,8 @@ a { | |||
text-decoration: none; | |||
&:focus, | |||
&:hover { | |||
color: $--color-primary; | |||
text-decoration: underline; | |||
color: #fff; | |||
// text-decoration: underline; | |||
} | |||
} | |||
img { | |||
@@ -217,6 +219,17 @@ img { | |||
&__brand { | |||
&-lg { | |||
display: none; | |||
// margin: 0; | |||
// color: #fff; | |||
// width: 189px; | |||
// overflow: hidden; | |||
// text-overflow: ellipsis; | |||
// white-space: nowrap; | |||
// font-weight: 500; | |||
// line-height: 50px; | |||
// font-size: 14px; | |||
// font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; | |||
// vertical-align: middle; | |||
} | |||
&-mini { | |||
display: inline-block; | |||
@@ -268,7 +281,9 @@ img { | |||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05); | |||
&--colorful { | |||
.aui-navbar__body { | |||
// navbar body颜色 | |||
background-color: transparent; | |||
// background-color: #304156; | |||
} | |||
.aui-navbar__menu { | |||
> .el-menu-item, | |||
@@ -278,6 +293,7 @@ img { | |||
&:hover { | |||
color: #fff; | |||
background-color: mix(#000, $--color-primary, 15%); | |||
// background-color: #001528; | |||
} | |||
} | |||
> .el-menu-item.is-active, | |||
@@ -285,7 +301,7 @@ img { | |||
color: #fff; | |||
&:focus, | |||
&:hover { | |||
color: #fff; | |||
color: #263445; | |||
} | |||
} | |||
.el-menu-item i, | |||
@@ -332,7 +348,16 @@ img { | |||
color: #fff; | |||
overflow: hidden; | |||
transition: width .3s; | |||
&-lg, | |||
&-lg { | |||
width: 238px; | |||
height: 100%; | |||
font-size: 18px; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #FFFFFF; | |||
line-height: 20px; | |||
margin-top: 7px; | |||
} | |||
&-mini { | |||
max-width: 100%; | |||
color: #fff; | |||
@@ -392,9 +417,10 @@ img { | |||
* { | |||
vertical-align: initial; | |||
} | |||
// | |||
.aui-navbar__icon-menu { | |||
vertical-align: middle; | |||
font-size: 16px; | |||
font-size: 22px; | |||
} | |||
.el-dropdown { | |||
color: $--color-text-secondary; | |||
@@ -463,7 +489,8 @@ img { | |||
bottom: 0; | |||
z-index: 1020; | |||
width: $sidebar--width; | |||
background-color: #fff; | |||
// background-color: #fff; | |||
background-color:#304156; | |||
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05); | |||
overflow: hidden; | |||
transition: width .3s; | |||
@@ -471,23 +498,28 @@ img { | |||
background-color: $sidebar--background-color-dark; | |||
.aui-sidebar__menu, | |||
> .el-menu--popup { | |||
background-color: $sidebar--background-color-dark; | |||
// background-color: $sidebar--background-color-dark; | |||
background-color: #304156;; | |||
.el-menu-item, | |||
.el-submenu > .el-submenu__title { | |||
color: $sidebar--text-color-dark; | |||
// color: $sidebar--text-color-dark; | |||
color: #f4f4f5; | |||
&:focus, | |||
&:hover { | |||
color: mix(#fff, $sidebar--text-color-dark, 50%); | |||
background-color: mix(#fff, $sidebar--background-color-dark, 2.5%); | |||
// background-color: mix(#fff, $sidebar--background-color-dark, 2.5%); | |||
background-color:#0B253F; | |||
} | |||
} | |||
.el-menu, | |||
.el-submenu.is-opened { | |||
background-color: mix(#000, $sidebar--background-color-dark, 15%); | |||
// background-color: mix(#000, $sidebar--background-color-dark, 15%); | |||
background-color:#0B253F; | |||
} | |||
.el-menu-item.is-active, | |||
.el-submenu.is-active > .el-submenu__title { | |||
color: mix(#fff, $sidebar--text-color-dark, 80%); | |||
// color: mix(#fff, $sidebar--text-color-dark, 80%); | |||
color: #409EFF; | |||
} | |||
} | |||
} | |||
@@ -5,9 +5,11 @@ $base--line-height: 1.15; | |||
$navbar--height: 50px; | |||
// Sidebar | |||
$sidebar--width: 300px; | |||
// $sidebar--width: 300px; | |||
$sidebar--width: 248px; | |||
$sidebar--width-fold: 64px; | |||
$sidebar--background-color-dark: #263238; | |||
// $sidebar--background-color-dark: #263238; | |||
$sidebar--background-color-dark: #001529; | |||
$sidebar--text-color-dark: #8a979e; | |||
$sidebar--menu-item-height: 48px; | |||
@@ -0,0 +1,93 @@ | |||
<!-- | |||
* @Author: your name | |||
* @Date: 2021-01-27 10:07:42 | |||
* @LastEditTime: 2021-01-28 16:26:15 | |||
* @LastEditors: gtz | |||
* @Description: In User Settings Edit | |||
* @FilePath: \mt-bus-fe\src\components\Breadcrumb\index.vue | |||
--> | |||
<template> | |||
<el-breadcrumb class="app-breadcrumb" separator="/"> | |||
<transition-group name="breadcrumb"> | |||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> | |||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="isredirect">{{ item.meta.title }}</span> | |||
<span v-else class="no-redirect">{{ item.meta.title }}</span> | |||
<!-- @click.prevent="handleLink(item)" --> | |||
</el-breadcrumb-item> | |||
</transition-group> | |||
</el-breadcrumb> | |||
</template> | |||
<script> | |||
import pathToRegexp from 'path-to-regexp' | |||
export default { | |||
data() { | |||
return { | |||
levelList: null | |||
} | |||
}, | |||
watch: { | |||
$route(route) { | |||
// if you go to the redirect page, do not update the breadcrumbs | |||
if (route.path.startsWith('/redirect/')) { | |||
return | |||
} | |||
this.getBreadcrumb() | |||
} | |||
}, | |||
created() { | |||
this.getBreadcrumb() | |||
}, | |||
methods: { | |||
getBreadcrumb() { | |||
// only show routes with meta.title | |||
const matched = this.$route.matched.filter(item => item.meta && item.meta.title) | |||
// const first = matched[0] | |||
// if (!this.isDashboard(first)) { | |||
// matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) | |||
// } | |||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) | |||
}, | |||
isDashboard(route) { | |||
const name = route && route.name | |||
if (!name) { | |||
return false | |||
} | |||
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() | |||
}, | |||
pathCompile(path) { | |||
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 | |||
const { params } = this.$route | |||
var toPath = pathToRegexp.compile(path) | |||
return toPath(params) | |||
}, | |||
handleLink(item) { | |||
const { redirect, path } = item | |||
if (redirect) { | |||
this.$router.push(redirect) | |||
return | |||
} | |||
this.$router.push(this.pathCompile(path)) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.app-breadcrumb.el-breadcrumb { | |||
display: inline-block; | |||
font-size: 14px; | |||
line-height: 48px; | |||
margin-left: 8px; | |||
.isredirect { | |||
color: rgba(0, 0, 0, 0.65); | |||
} | |||
.no-redirect { | |||
color: #8C8C8C; | |||
cursor: text; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,35 @@ | |||
<template> | |||
<div style="padding: 5px 15px 5px 32px;" @click="toggleClick"> | |||
<svg-icon style="width: 24px; height: 24px" class="item-icon hamburger" :class="{'is-active':isActive}" icon-class="hamburgerBtn" /> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
name: 'Hamburger', | |||
props: { | |||
isActive: { | |||
type: Boolean, | |||
default: false | |||
} | |||
}, | |||
methods: { | |||
toggleClick() { | |||
this.$emit('toggleClick') | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.hamburger { | |||
display: inline-block; | |||
vertical-align: middle; | |||
width: 20px; | |||
height: 20px; | |||
} | |||
.hamburger.is-active { | |||
transform: rotate(180deg); | |||
} | |||
</style> |
@@ -0,0 +1,62 @@ | |||
<template> | |||
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> | |||
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> | |||
<use :xlink:href="iconName" /> | |||
</svg> | |||
</template> | |||
<script> | |||
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage | |||
import { isExternal } from '@/utils/validate' | |||
export default { | |||
name: 'SvgIcon', | |||
props: { | |||
iconClass: { | |||
type: String, | |||
required: true | |||
}, | |||
className: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
computed: { | |||
isExternal() { | |||
return isExternal(this.iconClass) | |||
}, | |||
iconName() { | |||
return `#icon-${this.iconClass}` | |||
}, | |||
svgClass() { | |||
if (this.className) { | |||
return 'svg-icon ' + this.className | |||
} else { | |||
return 'svg-icon' | |||
} | |||
}, | |||
styleExternalIcon() { | |||
return { | |||
mask: `url(${this.iconClass}) no-repeat 50% 50%`, | |||
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.svg-icon { | |||
width: 1em; | |||
height: 1em; | |||
vertical-align: -0.15em; | |||
fill: currentColor; | |||
overflow: hidden; | |||
} | |||
.svg-external-icon { | |||
background-color: currentColor; | |||
mask-size: cover!important; | |||
display: inline-block; | |||
} | |||
</style> |
@@ -45,7 +45,8 @@ $mgr: 6px; | |||
line-height: $height; | |||
color: #000; | |||
font-weight: 500; | |||
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif; | |||
// font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif; | |||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; | |||
&::before { | |||
content: ''; | |||
@@ -16,7 +16,8 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; | |||
/* Color | |||
-------------------------- */ | |||
/// color|1|Brand Color|0 | |||
$--color-primary: #409EFF !default; | |||
// $--color-primary: #409EFF !default; | |||
$--color-primary: #001529 !default; | |||
/// color|1|Background Color|4 | |||
$--color-white: #FFFFFF !default; | |||
/// color|1|Background Color|4 | |||
@@ -4,8 +4,8 @@ t.loading = 'Loading...' | |||
t.createTime = 'Create Time' | |||
t.brand = {} | |||
t.brand.lg = 'Monitoring System' | |||
t.brand.mini = 'PMS' | |||
t.brand.lg = 'Deep Processing SCADA Platform' | |||
t.brand.mini = 'SCADA' | |||
t.routes = {} | |||
t.routes['产品池'] = 'Products Pool' | |||
@@ -431,6 +431,7 @@ t.login.password = 'Password' | |||
t.login.captcha = 'Captcha' | |||
t.login.demo = 'Demo' | |||
t.login.copyright = 'Copyright @Intelligent Automation Research Institute Co., Ltd Version: 1.0' | |||
t.login.warning = 'Already Login!' | |||
t.schedule = {} | |||
t.schedule.beanName = 'Bean Name' | |||
@@ -4,8 +4,8 @@ t.loading = '加载中...' | |||
t.createTime = '添加时间' | |||
t.brand = {} | |||
t.brand.lg = '生产监控系统' | |||
t.brand.mini = '监控' | |||
t.brand.lg = '深加工SCADA平台' | |||
t.brand.mini = 'SCADA' | |||
t.routes = {} | |||
// 一级 | |||
@@ -430,6 +430,7 @@ t.login.password = '密码' | |||
t.login.captcha = '验证码' | |||
t.login.demo = '在线演示' | |||
t.login.copyright = '版权所有:中建材智能自动化研究院有限公司 版本: 1.0' | |||
t.login.warning = '已经登录过了' | |||
t.schedule = {} | |||
t.schedule.beanName = 'bean名称' | |||
@@ -1,4 +1,21 @@ | |||
import './iconfont' | |||
import Vue from 'vue' | |||
import SvgIcon from '@/components/SvgIcon'// svg component | |||
// register globally | |||
Vue.component('svg-icon', SvgIcon) | |||
const req = require.context('./svg', false, /\.svg$/) | |||
const requireAll = requireContext => requireContext.keys().map(requireContext) | |||
requireAll(req) | |||
const svgFiles = require.context('./svg', true, /\.svg$/) | |||
svgFiles.keys().map(item => svgFiles(item)) | |||
export default { | |||
// 获取图标icon-(*).svg名称列表, 例如[shouye, xitong, zhedie, ...] | |||
getNameList() { | |||
return requireAll(req).map(item => item.default.id.replace('icon-', '')) | |||
} | |||
} | |||
@@ -0,0 +1 @@ | |||
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg> |
@@ -0,0 +1 @@ | |||
<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg> |
@@ -0,0 +1 @@ | |||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M83.287 103.01c-1.57-3.84-6.778-10.414-15.447-19.548-2.327-2.444-2.182-4.306-1.338-9.862v-.64c.553-3.81 1.513-6.05 14.313-8.087 6.516-1.018 8.203 1.57 10.589 5.178l.785 1.193a12.625 12.625 0 0 0 6.43 5.207c1.134.524 2.53 1.164 4.421 2.24 4.596 2.53 4.596 5.41 4.596 11.753v.727a26.91 26.91 0 0 1-5.178 17.454 59.055 59.055 0 0 1-19.025 11.026c3.49-6.546.814-14.313 0-16.553l-.146-.087zM64 5.12a58.502 58.502 0 0 1 25.484 5.818 54.313 54.313 0 0 0-12.859 10.327c-.93 1.28-1.716 2.473-2.472 3.579-2.444 3.694-3.637 5.352-5.818 5.614a25.105 25.105 0 0 1-4.219 0c-4.276-.29-10.094-.64-11.956 4.422-1.193 3.23-1.396 11.956 2.444 16.495.66 1.077.778 2.4.32 3.578a7.01 7.01 0 0 1-2.066 3.229 18.938 18.938 0 0 1-2.909-2.91 18.91 18.91 0 0 0-8.32-6.603c-1.25-.349-2.647-.64-3.985-.93-3.782-.786-8.03-1.688-9.019-3.812a14.895 14.895 0 0 1-.727-5.818 21.935 21.935 0 0 0-1.396-9.25 8.873 8.873 0 0 0-5.557-4.946A58.705 58.705 0 0 1 64 5.12zM0 64c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-35.346-28.654-64-64-64C28.654 0 0 28.654 0 64z"/></svg> |
@@ -30,7 +30,7 @@ export const pageRoutes = [ | |||
meta: { title: '登录' }, | |||
beforeEnter(to, from, next) { | |||
if (Cookies.get('token')) { | |||
Vue.prototype.$message({ message: '已经登录过了', type: 'error' }) | |||
Vue.prototype.$message({ message: $t('login.warning'), type: 'error' }) | |||
next(false) | |||
} else { | |||
next() | |||
@@ -44,10 +44,12 @@ export const moduleRoutes = { | |||
path: '/', | |||
component: () => import('@/views/main'), | |||
name: 'main', | |||
redirect: { name: 'home' }, | |||
// redirect: { name: 'home' }, | |||
redirect: { name: 'sys-log-login' }, | |||
meta: { title: '主入口布局' }, | |||
children: [ | |||
{ path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } } | |||
{ path: '/sys-log-login', component: () => import('@/views/modules/sys/log-login'), name: 'sys-log-login', meta: { title: '首页', isTab: true } } | |||
// { path: '/home', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } } | |||
] | |||
} | |||
@@ -1,3 +1,11 @@ | |||
/* | |||
* @Descripttion: | |||
* @version: | |||
* @Author: fzq | |||
* @Date: 2022-12-11 20:33:35 | |||
* @LastEditors: fzq | |||
* @LastEditTime: 2022-12-11 20:43:32 | |||
*/ | |||
import Vue from 'vue' | |||
import Vuex from 'vuex' | |||
import cloneDeep from 'lodash/cloneDeep' | |||
@@ -9,7 +17,7 @@ export default new Vuex.Store({ | |||
namespaced: true, | |||
state: { | |||
// 导航条, 布局风格, default(白色) / colorful(鲜艳) | |||
navbarLayoutType: 'colorful', | |||
navbarLayoutType: '', | |||
// 侧边栏, 布局皮肤, default(白色) / dark(黑色) | |||
sidebarLayoutSkin: 'dark', | |||
// 侧边栏, 折叠状态 | |||
@@ -23,11 +31,13 @@ export default new Vuex.Store({ | |||
contentTabs: [ | |||
{ | |||
...window.SITE_CONFIG['contentTabDefault'], | |||
'name': 'home', | |||
'name': 'sys-log-login', | |||
// 'name': 'home', | |||
'title': 'home' | |||
} | |||
], | |||
contentTabsActiveName: 'home' | |||
// contentTabsActiveName: 'home' | |||
contentTabsActiveName: 'sys-log-login' | |||
}, | |||
modules: { | |||
user | |||
@@ -1,3 +1,11 @@ | |||
/* | |||
* @Descripttion: | |||
* @version: | |||
* @Author: fzq | |||
* @Date: 2022-11-25 09:51:46 | |||
* @LastEditors: fzq | |||
* @LastEditTime: 2022-11-30 15:09:05 | |||
*/ | |||
/** | |||
* 邮箱 | |||
* @param {*} s | |||
@@ -29,3 +37,11 @@ export function isPhone (s) { | |||
export function isURL (s) { | |||
return /^http[s]?:\/\/.*/.test(s) | |||
} | |||
/** | |||
* @param {string} path | |||
* @returns {Boolean} | |||
*/ | |||
export function isExternal(path) { | |||
return /^(https?:|mailto:|tel:)/.test(path) | |||
} |
@@ -1,11 +1,20 @@ | |||
<template> | |||
<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`"> | |||
<!-- <hamburger v-if="showhome" id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> --> | |||
<div class="aui-navbar__header"> | |||
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'home' })"> | |||
<a class="aui-navbar__brand-lg" href="javascript:;">{{ $t('brand.lg') }}</a> | |||
<a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a> | |||
<h1 class="aui-navbar__brand" @click="$router.push({ name: 'sys-log-login' })"> | |||
<a class="aui-navbar__brand-lg" href="javascript:;"> | |||
<img src="../assets/img/cnbm.png" style="width: 36px; height: 36px; position: relative; top: 0em; margin-right: 12px" alt="" /> | |||
{{ $t('brand.lg') }} | |||
</a> | |||
<!-- <a class="aui-navbar__brand-mini" href="javascript:;">{{ $t('brand.mini') }}</a> --> | |||
<!-- 缩放时LOGO --> | |||
<a class="aui-navbar__brand-mini" href="javascript:;"> | |||
<img src="../assets/img/cnbm.png" style="width: 36px; height: 36px; position: relative; top: 0em" alt="" /> | |||
</a> | |||
</h1> | |||
</div> | |||
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> --> | |||
<div class="aui-navbar__body"> | |||
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal"> | |||
<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold"> | |||
@@ -31,6 +40,14 @@ | |||
</a> | |||
</el-menu-item> --> | |||
<el-menu-item index="3"> | |||
<!-- <el-dropdown :style="showTitle ? 'color: #fff' : '#000'" class="hover-effect" trigger="click"> | |||
<el-badge :hidden="alarmNum > 0 ? false : true" :value="alarmNum" class="item" style="line-height: 0; margin: 0 10px; vertical-align: -3px" @click.native="handleAlarm"> | |||
<svg-icon style="width: 24px; height: 24px" class="item-icon" icon-class="alarm" /> | |||
</el-badge> | |||
<el-dropdown-menu slot="dropdown"> | |||
<el-dropdown-item>暂无数据</el-dropdown-item> | |||
</el-dropdown-menu> | |||
</el-dropdown> --> | |||
<el-dropdown placement="bottom" :show-timeout="0" @command="handleCommand"> | |||
<span class="el-dropdown-link"> | |||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"> | |||
@@ -69,6 +86,7 @@ | |||
</nav> | |||
</template> | |||
<script> | |||
// import Hamburger from '@/components/Hamburger' | |||
import Cookies from 'js-cookie' | |||
import screenfull from 'screenfull' | |||
import UpdatePassword from './main-navbar-update-password' | |||
@@ -83,6 +101,7 @@ export default { | |||
}, | |||
components: { | |||
UpdatePassword | |||
// Hamburger | |||
}, | |||
methods: { | |||
// 获取当前语言环境 | |||
@@ -53,6 +53,7 @@ export default { | |||
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false | |||
window.addEventListener( | |||
'resize', | |||
// 防抖 | |||
debounce(() => { | |||
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false | |||
}, 150) | |||
@@ -1,6 +1,14 @@ | |||
<!-- | |||
* @Descripttion: | |||
* @version: | |||
* @Author: fzq | |||
* @Date: 2022-12-09 15:44:37 | |||
* @LastEditors: fzq | |||
* @LastEditTime: 2022-12-11 20:47:56 | |||
--> | |||
<template> | |||
<el-card shadow="never" class="aui-card--fill"> | |||
<div class="mod-home"> | |||
<!-- <div class="mod-home"> | |||
<h3>项目介绍</h3> | |||
<ul> | |||
<li> | |||
@@ -21,10 +29,17 @@ | |||
<ul> | |||
<li>扫码下面的二维码,关注【人人开源】公众号,回复【加群】,即可根据提示加入微信群!</li> | |||
</ul> | |||
</div> | |||
</div> --> | |||
</el-card> | |||
</template> | |||
<script> | |||
export default { | |||
created() { | |||
this.$router.replace({ name: 'sys-log-login' }) | |||
}, | |||
} | |||
</script> | |||
<style> | |||
.mod-home { | |||
line-height: 1.5; | |||
@@ -1,69 +1,116 @@ | |||
<template> | |||
<div class="aui-wrapper aui-page__login"> | |||
<div class="aui-content__wrapper"> | |||
<main class="aui-content"> | |||
<div class="login-header"> | |||
<h2 class="login-brand">{{ $t('brand.lg') }}</h2> | |||
<div class="login-container"> | |||
<div class="login-background" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}"> | |||
<div class="login-background-container"> | |||
<div class="back-title"> | |||
Wel<span>come</span> | |||
<p><span class="back-title-point" />{{ $t('brand.lg') }}</p> | |||
</div> | |||
<div class="login-body"> | |||
<h3 class="login-title">{{ $t('login.title') }}</h3> | |||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon> | |||
<el-form-item prop="username"> | |||
<el-input v-model="dataForm.username" :placeholder="$t('login.username')"> | |||
<span slot="prefix" class="el-input__icon"> | |||
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg> | |||
</span> | |||
</el-input> | |||
<img :src="require('../../assets/img/login.gif')" style="width: 90%; margin-left: 5%" alt=""> | |||
</div> | |||
</div> | |||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule" class="login-form" autocomplete="on" label-position="left" @keyup.enter.native="dataFormSubmitHandle()"> | |||
<div class="title-container"> | |||
<h3 class="title" :title="$t('brand.lg')"> | |||
<img src="../../assets/img/cnbm.png" style="width: 1em; height: 1em; position: relative; top: 0em; margin-right: 12px" alt=""> | |||
{{ $t('brand.lg') }} | |||
</h3> | |||
</div> | |||
<el-form-item prop="username" style="margin: 0px 8.3%"> | |||
<el-input | |||
ref="username" | |||
v-model="dataForm.username" | |||
:placeholder="$t('login.username')" | |||
name="username" | |||
type="text" | |||
tabindex="1" | |||
autocomplete="on" | |||
/> | |||
</el-form-item> | |||
<el-form-item prop="password"> | |||
<el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')"> | |||
<span slot="prefix" class="el-input__icon"> | |||
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg> | |||
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual> | |||
<el-form-item prop="password" style="margin: 8px 8.3%"> | |||
<el-input | |||
:key="passwordType" | |||
ref="password" | |||
v-model="dataForm.password" | |||
:type="passwordType" | |||
:placeholder="$t('login.password')" | |||
name="password" | |||
tabindex="2" | |||
autocomplete="on" | |||
@keyup.native="checkCapslock" | |||
@blur="capsTooltip = false" | |||
@keyup.enter.native="dataFormSubmitHandle()" | |||
/> | |||
<span class="show-pwd" @click="showPwd"> | |||
<svg-icon :icon-class="passwordType === 'password' ? 'eye-open' : 'eye'" /> | |||
</span> | |||
</el-input> | |||
</el-form-item> | |||
<!-- <el-form-item prop="captcha"> | |||
<el-row :gutter="20"> | |||
<el-col :span="14"> | |||
<el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')"> | |||
<span slot="prefix" class="el-input__icon"> | |||
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg> | |||
</span> | |||
</el-input> | |||
</el-tooltip> | |||
<!-- <lang-select class="login-language" /> --> | |||
<el-button :loading="loading" type="primary" style="width: 83.4%; height: 6vh; background-color: #0B58FF; margin: 0px 8.3%; margin-top: 5vh" @click="dataFormSubmitHandle()"> | |||
{{ $t('login.title') }} | |||
</el-button> | |||
<el-row class="login-footer"> | |||
<el-row class="login-language"> | |||
<el-col | |||
:span="2" | |||
:offset="8" | |||
:class="['login-language-box', this.$root.$i18n.locale === 'zh-CN' ? 'isActive' : '']" | |||
@click.native="chLang('zh')" | |||
> | |||
中文 | |||
</el-col> | |||
<el-col :span="10" class="login-captcha"> | |||
<img :src="captchaPath" @click="getCaptcha()"> | |||
<el-col :span="1" :offset="1" style="color: #DCDFE6">|</el-col> | |||
<el-col | |||
:span="2" | |||
:offset="1" | |||
:class="['login-language-box', this.$root.$i18n.locale === 'en' ? 'isActive' : '']" | |||
@click.native="chLang('en')" | |||
> | |||
English | |||
</el-col> | |||
</el-row> | |||
</el-form-item> --> | |||
<el-form-item> | |||
<el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button> | |||
</el-form-item> | |||
</el-form> | |||
</div> | |||
<div class="login-footer"> | |||
<p style="background: #ececec99; border-radius: 8px;"> | |||
<el-button style="background: none; color: #fff; border: unset; outline: unset; cursor: pointer;" @click="chLang('zh')">中文</el-button> | | |||
<el-button style="background: none; color: #fff; border: unset; outline: unset; cursor: pointer;" @click="chLang('en')">English</el-button> | |||
</p> | |||
<p> | |||
<el-row class="login-copyright"> | |||
{{ $t('login.copyright') }} | |||
</p> | |||
</el-row> | |||
</el-row> | |||
<!-- <div style="position:relative"> | |||
<div class="tips"> | |||
<span>Username : admin</span> | |||
<span>Password : any</span> | |||
</div> | |||
</main> | |||
<div class="tips"> | |||
<span style="margin-right:18px;">Username : editor</span> | |||
<span>Password : any</span> | |||
</div> | |||
</div> --> | |||
</el-form> | |||
</div> | |||
</template> | |||
<script> | |||
// import { downLoadBGP } from '@/api/user' | |||
// import { mapGetters } from 'vuex' | |||
import Cookies from 'js-cookie' | |||
import debounce from 'lodash/debounce' | |||
// import { getUUID } from '@/utils' | |||
export default { | |||
data() { | |||
return { | |||
baseImg: require('../../assets/img/login-back.png'), | |||
coverImgUrl: '', | |||
captchaPath: '', | |||
passwordType: 'password', | |||
capsTooltip: false, | |||
loading: false, | |||
dataForm: { | |||
username: 'admin', | |||
password: 'admin', | |||
@@ -73,6 +120,7 @@ export default { | |||
} | |||
}, | |||
computed: { | |||
// ...mapGetters(['language']), | |||
dataRule() { | |||
return { | |||
username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], | |||
@@ -87,6 +135,20 @@ export default { | |||
// this.getCaptcha() | |||
}, | |||
methods: { | |||
checkCapslock(e) { | |||
const { key } = e | |||
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z') | |||
}, | |||
showPwd() { | |||
if (this.passwordType === 'password') { | |||
this.passwordType = '' | |||
} else { | |||
this.passwordType = 'password' | |||
} | |||
this.$nextTick(() => { | |||
this.$refs.password.focus() | |||
}) | |||
}, | |||
chLang(lang) { | |||
switch (lang) { | |||
case 'zh': | |||
@@ -137,7 +199,8 @@ export default { | |||
} | |||
}) | |||
this.$router.replace({ name: 'home' }) | |||
// this.$router.replace({ name: 'home' }) | |||
this.$router.replace({ name: 'sys-log-login' }) | |||
}) | |||
.catch(err => { | |||
this.$message({ | |||
@@ -154,3 +217,201 @@ export default { | |||
} | |||
} | |||
</script> | |||
<style lang="scss"> | |||
/* 修复input 背景不协调 和光标变色 */ | |||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ | |||
// $bg:#283443; | |||
$light_gray:#fff; | |||
$cursor: #161616; | |||
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { | |||
.login-container .el-input input { | |||
color: $cursor; | |||
height: 6vh !important; | |||
} | |||
} | |||
/* reset element-ui css */ | |||
.login-container { | |||
.el-input { | |||
display: inline-block; | |||
height: 47px; | |||
width: 85%; | |||
input { | |||
background: transparent; | |||
border: 0px; | |||
-webkit-appearance: none; | |||
border-radius: 0px; | |||
padding: 12px 5px 12px 15px; | |||
} | |||
} | |||
.el-form-item { | |||
border: 1px solid #D7D8D9; | |||
border-radius: 5px; | |||
color: #454545; | |||
height: 6vh; | |||
.el-form-item__content { | |||
height: calc(6vh - 2px); | |||
line-height: 6vh; | |||
.el-input { | |||
height: calc(6vh - 2px); | |||
} | |||
} | |||
} | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
// $bg:#2d3a4b; | |||
$dark_gray:#889aa4; | |||
$light_gray:#eee; | |||
$cursor: #161616; | |||
.login-container { | |||
min-height: 100%; | |||
width: 100%; | |||
background-size: cover; | |||
// background-color: $bg; | |||
overflow: hidden; | |||
.login-background{ | |||
position: absolute; | |||
width: 60%; | |||
top: 0; | |||
left: 0; | |||
bottom: 0; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
.login-background-container{ | |||
width: 95%; | |||
.back-title{ | |||
color: #26B9DE; | |||
font-size: 88px; | |||
margin-left: 17%; | |||
span { | |||
color: #fff; | |||
} | |||
p { | |||
font-size: 22px; | |||
letter-spacing: 1px; | |||
.back-title-point { | |||
display: inline-block; | |||
width: 16px; | |||
height: 16px; | |||
border-radius: 8px; | |||
background-color: #26B9DE; | |||
margin-right: 14px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.login-form { | |||
position: absolute; | |||
width: 40%; | |||
max-width: 100%; | |||
top: 0; | |||
right: 0; | |||
bottom: 0; | |||
padding: 0 6.67%; | |||
margin: 0 auto; | |||
overflow: hidden; | |||
background: rgba($color: #fff, $alpha: 1); | |||
backdrop-filter: blur(10px); | |||
box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: .1); | |||
.login-footer{ | |||
position: absolute; | |||
bottom: 0; | |||
right: 0; | |||
left: 0; | |||
margin-bottom: 5vh; | |||
} | |||
.login-language{ | |||
font-size: 15px; | |||
text-align: center; | |||
color: $cursor; | |||
margin-bottom: 12px; | |||
.login-language-box { | |||
cursor: pointer; | |||
} | |||
.isActive { | |||
color: #0B58FF; | |||
cursor: auto; | |||
} | |||
} | |||
.login-copyright{ | |||
text-align: center; | |||
color: #C7C7C7; | |||
font-size: 15px; | |||
line-height: 28px; | |||
padding: 0 16%; | |||
} | |||
} | |||
.tips { | |||
font-size: 14px; | |||
color: #fff; | |||
margin-bottom: 10px; | |||
span { | |||
&:first-of-type { | |||
margin-right: 16px; | |||
} | |||
} | |||
} | |||
.svg-container { | |||
padding: 6px 5px 6px 15px; | |||
color: #000; | |||
vertical-align: middle; | |||
width: 30px; | |||
display: inline-block; | |||
} | |||
.title-container { | |||
position: relative; | |||
margin-top: 18vh; | |||
.title { | |||
font-size: 34px; | |||
line-height: 6vh; | |||
margin: 0px auto 40px auto; | |||
text-align: center; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
word-break: break-all; | |||
display: -webkit-box; | |||
-webkit-line-clamp: 3; | |||
-webkit-box-orient: vertical; | |||
letter-spacing: 2px; | |||
} | |||
} | |||
.show-pwd { | |||
position: absolute; | |||
right: 10px; | |||
top: 0; | |||
font-size: 16px; | |||
color: $dark_gray; | |||
cursor: pointer; | |||
user-select: none; | |||
} | |||
.thirdparty-button { | |||
position: absolute; | |||
right: 0; | |||
bottom: 6px; | |||
} | |||
@media only screen and (max-width: 470px) { | |||
.thirdparty-button { | |||
display: none; | |||
} | |||
} | |||
} | |||
</style> |