@@ -5,6 +5,8 @@ | |||||
} | } | ||||
body { | 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: 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; | font-size: $--font-size-base; | ||||
line-height: $base--line-height; | line-height: $base--line-height; | ||||
color: $--color-text-primary; | color: $--color-text-primary; | ||||
@@ -15,8 +17,8 @@ a { | |||||
text-decoration: none; | text-decoration: none; | ||||
&:focus, | &:focus, | ||||
&:hover { | &:hover { | ||||
color: $--color-primary; | |||||
text-decoration: underline; | |||||
color: #fff; | |||||
// text-decoration: underline; | |||||
} | } | ||||
} | } | ||||
img { | img { | ||||
@@ -217,6 +219,17 @@ img { | |||||
&__brand { | &__brand { | ||||
&-lg { | &-lg { | ||||
display: none; | 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 { | &-mini { | ||||
display: inline-block; | display: inline-block; | ||||
@@ -268,7 +281,9 @@ img { | |||||
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05); | box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05); | ||||
&--colorful { | &--colorful { | ||||
.aui-navbar__body { | .aui-navbar__body { | ||||
// navbar body颜色 | |||||
background-color: transparent; | background-color: transparent; | ||||
// background-color: #304156; | |||||
} | } | ||||
.aui-navbar__menu { | .aui-navbar__menu { | ||||
> .el-menu-item, | > .el-menu-item, | ||||
@@ -278,6 +293,7 @@ img { | |||||
&:hover { | &:hover { | ||||
color: #fff; | color: #fff; | ||||
background-color: mix(#000, $--color-primary, 15%); | background-color: mix(#000, $--color-primary, 15%); | ||||
// background-color: #001528; | |||||
} | } | ||||
} | } | ||||
> .el-menu-item.is-active, | > .el-menu-item.is-active, | ||||
@@ -285,7 +301,7 @@ img { | |||||
color: #fff; | color: #fff; | ||||
&:focus, | &:focus, | ||||
&:hover { | &:hover { | ||||
color: #fff; | |||||
color: #263445; | |||||
} | } | ||||
} | } | ||||
.el-menu-item i, | .el-menu-item i, | ||||
@@ -332,7 +348,16 @@ img { | |||||
color: #fff; | color: #fff; | ||||
overflow: hidden; | overflow: hidden; | ||||
transition: width .3s; | 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 { | &-mini { | ||||
max-width: 100%; | max-width: 100%; | ||||
color: #fff; | color: #fff; | ||||
@@ -392,9 +417,10 @@ img { | |||||
* { | * { | ||||
vertical-align: initial; | vertical-align: initial; | ||||
} | } | ||||
// | |||||
.aui-navbar__icon-menu { | .aui-navbar__icon-menu { | ||||
vertical-align: middle; | vertical-align: middle; | ||||
font-size: 16px; | |||||
font-size: 22px; | |||||
} | } | ||||
.el-dropdown { | .el-dropdown { | ||||
color: $--color-text-secondary; | color: $--color-text-secondary; | ||||
@@ -463,7 +489,8 @@ img { | |||||
bottom: 0; | bottom: 0; | ||||
z-index: 1020; | z-index: 1020; | ||||
width: $sidebar--width; | width: $sidebar--width; | ||||
background-color: #fff; | |||||
// background-color: #fff; | |||||
background-color:#304156; | |||||
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05); | box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05); | ||||
overflow: hidden; | overflow: hidden; | ||||
transition: width .3s; | transition: width .3s; | ||||
@@ -471,23 +498,28 @@ img { | |||||
background-color: $sidebar--background-color-dark; | background-color: $sidebar--background-color-dark; | ||||
.aui-sidebar__menu, | .aui-sidebar__menu, | ||||
> .el-menu--popup { | > .el-menu--popup { | ||||
background-color: $sidebar--background-color-dark; | |||||
// background-color: $sidebar--background-color-dark; | |||||
background-color: #304156;; | |||||
.el-menu-item, | .el-menu-item, | ||||
.el-submenu > .el-submenu__title { | .el-submenu > .el-submenu__title { | ||||
color: $sidebar--text-color-dark; | |||||
// color: $sidebar--text-color-dark; | |||||
color: #f4f4f5; | |||||
&:focus, | &:focus, | ||||
&:hover { | &:hover { | ||||
color: mix(#fff, $sidebar--text-color-dark, 50%); | 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-menu, | ||||
.el-submenu.is-opened { | .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-menu-item.is-active, | ||||
.el-submenu.is-active > .el-submenu__title { | .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; | $navbar--height: 50px; | ||||
// Sidebar | // Sidebar | ||||
$sidebar--width: 300px; | |||||
// $sidebar--width: 300px; | |||||
$sidebar--width: 248px; | |||||
$sidebar--width-fold: 64px; | $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--text-color-dark: #8a979e; | ||||
$sidebar--menu-item-height: 48px; | $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; | line-height: $height; | ||||
color: #000; | color: #000; | ||||
font-weight: 500; | 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 { | &::before { | ||||
content: ''; | content: ''; | ||||
@@ -16,7 +16,8 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; | |||||
/* Color | /* Color | ||||
-------------------------- */ | -------------------------- */ | ||||
/// color|1|Brand Color|0 | /// color|1|Brand Color|0 | ||||
$--color-primary: #409EFF !default; | |||||
// $--color-primary: #409EFF !default; | |||||
$--color-primary: #001529 !default; | |||||
/// color|1|Background Color|4 | /// color|1|Background Color|4 | ||||
$--color-white: #FFFFFF !default; | $--color-white: #FFFFFF !default; | ||||
/// color|1|Background Color|4 | /// color|1|Background Color|4 | ||||
@@ -4,8 +4,8 @@ t.loading = 'Loading...' | |||||
t.createTime = 'Create Time' | t.createTime = 'Create Time' | ||||
t.brand = {} | 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 = {} | ||||
t.routes['产品池'] = 'Products Pool' | t.routes['产品池'] = 'Products Pool' | ||||
@@ -431,6 +431,7 @@ t.login.password = 'Password' | |||||
t.login.captcha = 'Captcha' | t.login.captcha = 'Captcha' | ||||
t.login.demo = 'Demo' | t.login.demo = 'Demo' | ||||
t.login.copyright = 'Copyright @Intelligent Automation Research Institute Co., Ltd Version: 1.0' | t.login.copyright = 'Copyright @Intelligent Automation Research Institute Co., Ltd Version: 1.0' | ||||
t.login.warning = 'Already Login!' | |||||
t.schedule = {} | t.schedule = {} | ||||
t.schedule.beanName = 'Bean Name' | t.schedule.beanName = 'Bean Name' | ||||
@@ -4,8 +4,8 @@ t.loading = '加载中...' | |||||
t.createTime = '添加时间' | t.createTime = '添加时间' | ||||
t.brand = {} | t.brand = {} | ||||
t.brand.lg = '生产监控系统' | |||||
t.brand.mini = '监控' | |||||
t.brand.lg = '深加工SCADA平台' | |||||
t.brand.mini = 'SCADA' | |||||
t.routes = {} | t.routes = {} | ||||
// 一级 | // 一级 | ||||
@@ -430,6 +430,7 @@ t.login.password = '密码' | |||||
t.login.captcha = '验证码' | t.login.captcha = '验证码' | ||||
t.login.demo = '在线演示' | t.login.demo = '在线演示' | ||||
t.login.copyright = '版权所有:中建材智能自动化研究院有限公司 版本: 1.0' | t.login.copyright = '版权所有:中建材智能自动化研究院有限公司 版本: 1.0' | ||||
t.login.warning = '已经登录过了' | |||||
t.schedule = {} | t.schedule = {} | ||||
t.schedule.beanName = 'bean名称' | t.schedule.beanName = 'bean名称' | ||||
@@ -1,4 +1,21 @@ | |||||
import './iconfont' | 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$/) | const svgFiles = require.context('./svg', true, /\.svg$/) | ||||
svgFiles.keys().map(item => svgFiles(item)) | 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: '登录' }, | meta: { title: '登录' }, | ||||
beforeEnter(to, from, next) { | beforeEnter(to, from, next) { | ||||
if (Cookies.get('token')) { | if (Cookies.get('token')) { | ||||
Vue.prototype.$message({ message: '已经登录过了', type: 'error' }) | |||||
Vue.prototype.$message({ message: $t('login.warning'), type: 'error' }) | |||||
next(false) | next(false) | ||||
} else { | } else { | ||||
next() | next() | ||||
@@ -44,10 +44,12 @@ export const moduleRoutes = { | |||||
path: '/', | path: '/', | ||||
component: () => import('@/views/main'), | component: () => import('@/views/main'), | ||||
name: 'main', | name: 'main', | ||||
redirect: { name: 'home' }, | |||||
// redirect: { name: 'home' }, | |||||
redirect: { name: 'sys-log-login' }, | |||||
meta: { title: '主入口布局' }, | meta: { title: '主入口布局' }, | ||||
children: [ | 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 Vue from 'vue' | ||||
import Vuex from 'vuex' | import Vuex from 'vuex' | ||||
import cloneDeep from 'lodash/cloneDeep' | import cloneDeep from 'lodash/cloneDeep' | ||||
@@ -9,7 +17,7 @@ export default new Vuex.Store({ | |||||
namespaced: true, | namespaced: true, | ||||
state: { | state: { | ||||
// 导航条, 布局风格, default(白色) / colorful(鲜艳) | // 导航条, 布局风格, default(白色) / colorful(鲜艳) | ||||
navbarLayoutType: 'colorful', | |||||
navbarLayoutType: '', | |||||
// 侧边栏, 布局皮肤, default(白色) / dark(黑色) | // 侧边栏, 布局皮肤, default(白色) / dark(黑色) | ||||
sidebarLayoutSkin: 'dark', | sidebarLayoutSkin: 'dark', | ||||
// 侧边栏, 折叠状态 | // 侧边栏, 折叠状态 | ||||
@@ -23,11 +31,13 @@ export default new Vuex.Store({ | |||||
contentTabs: [ | contentTabs: [ | ||||
{ | { | ||||
...window.SITE_CONFIG['contentTabDefault'], | ...window.SITE_CONFIG['contentTabDefault'], | ||||
'name': 'home', | |||||
'name': 'sys-log-login', | |||||
// 'name': 'home', | |||||
'title': 'home' | 'title': 'home' | ||||
} | } | ||||
], | ], | ||||
contentTabsActiveName: 'home' | |||||
// contentTabsActiveName: 'home' | |||||
contentTabsActiveName: 'sys-log-login' | |||||
}, | }, | ||||
modules: { | modules: { | ||||
user | 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 | * @param {*} s | ||||
@@ -29,3 +37,11 @@ export function isPhone (s) { | |||||
export function isURL (s) { | export function isURL (s) { | ||||
return /^http[s]?:\/\/.*/.test(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> | <template> | ||||
<nav class="aui-navbar" :class="`aui-navbar--${$store.state.navbarLayoutType}`"> | <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"> | <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> | </h1> | ||||
</div> | </div> | ||||
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> --> | |||||
<div class="aui-navbar__body"> | <div class="aui-navbar__body"> | ||||
<el-menu class="aui-navbar__menu mr-auto" mode="horizontal"> | <el-menu class="aui-navbar__menu mr-auto" mode="horizontal"> | ||||
<el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold"> | <el-menu-item index="1" @click="$store.state.sidebarFold = !$store.state.sidebarFold"> | ||||
@@ -31,6 +40,14 @@ | |||||
</a> | </a> | ||||
</el-menu-item> --> | </el-menu-item> --> | ||||
<el-menu-item index="3"> | <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"> | <el-dropdown placement="bottom" :show-timeout="0" @command="handleCommand"> | ||||
<span class="el-dropdown-link"> | <span class="el-dropdown-link"> | ||||
<svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"> | <svg class="icon-svg aui-navbar__icon-menu" aria-hidden="true"> | ||||
@@ -69,6 +86,7 @@ | |||||
</nav> | </nav> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
// import Hamburger from '@/components/Hamburger' | |||||
import Cookies from 'js-cookie' | import Cookies from 'js-cookie' | ||||
import screenfull from 'screenfull' | import screenfull from 'screenfull' | ||||
import UpdatePassword from './main-navbar-update-password' | import UpdatePassword from './main-navbar-update-password' | ||||
@@ -83,6 +101,7 @@ export default { | |||||
}, | }, | ||||
components: { | components: { | ||||
UpdatePassword | UpdatePassword | ||||
// Hamburger | |||||
}, | }, | ||||
methods: { | methods: { | ||||
// 获取当前语言环境 | // 获取当前语言环境 | ||||
@@ -53,6 +53,7 @@ export default { | |||||
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false | this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false | ||||
window.addEventListener( | window.addEventListener( | ||||
'resize', | 'resize', | ||||
// 防抖 | |||||
debounce(() => { | debounce(() => { | ||||
this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false | this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false | ||||
}, 150) | }, 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> | <template> | ||||
<el-card shadow="never" class="aui-card--fill"> | <el-card shadow="never" class="aui-card--fill"> | ||||
<div class="mod-home"> | |||||
<!-- <div class="mod-home"> | |||||
<h3>项目介绍</h3> | <h3>项目介绍</h3> | ||||
<ul> | <ul> | ||||
<li> | <li> | ||||
@@ -21,10 +29,17 @@ | |||||
<ul> | <ul> | ||||
<li>扫码下面的二维码,关注【人人开源】公众号,回复【加群】,即可根据提示加入微信群!</li> | <li>扫码下面的二维码,关注【人人开源】公众号,回复【加群】,即可根据提示加入微信群!</li> | ||||
</ul> | </ul> | ||||
</div> | |||||
</div> --> | |||||
</el-card> | </el-card> | ||||
</template> | </template> | ||||
<script> | |||||
export default { | |||||
created() { | |||||
this.$router.replace({ name: 'sys-log-login' }) | |||||
}, | |||||
} | |||||
</script> | |||||
<style> | <style> | ||||
.mod-home { | .mod-home { | ||||
line-height: 1.5; | line-height: 1.5; | ||||
@@ -1,69 +1,116 @@ | |||||
<template> | <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> | ||||
<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> | ||||
<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> | </span> | ||||
</el-input> | |||||
</el-form-item> | </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> | ||||
<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-col> | ||||
</el-row> | </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') }} | {{ $t('login.copyright') }} | ||||
</p> | |||||
</el-row> | |||||
</el-row> | |||||
<!-- <div style="position:relative"> | |||||
<div class="tips"> | |||||
<span>Username : admin</span> | |||||
<span>Password : any</span> | |||||
</div> | </div> | ||||
</main> | |||||
<div class="tips"> | |||||
<span style="margin-right:18px;">Username : editor</span> | |||||
<span>Password : any</span> | |||||
</div> | </div> | ||||
</div> --> | |||||
</el-form> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
// import { downLoadBGP } from '@/api/user' | |||||
// import { mapGetters } from 'vuex' | |||||
import Cookies from 'js-cookie' | import Cookies from 'js-cookie' | ||||
import debounce from 'lodash/debounce' | import debounce from 'lodash/debounce' | ||||
// import { getUUID } from '@/utils' | // import { getUUID } from '@/utils' | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
baseImg: require('../../assets/img/login-back.png'), | |||||
coverImgUrl: '', | |||||
captchaPath: '', | captchaPath: '', | ||||
passwordType: 'password', | |||||
capsTooltip: false, | |||||
loading: false, | |||||
dataForm: { | dataForm: { | ||||
username: 'admin', | username: 'admin', | ||||
password: 'admin', | password: 'admin', | ||||
@@ -73,6 +120,7 @@ export default { | |||||
} | } | ||||
}, | }, | ||||
computed: { | computed: { | ||||
// ...mapGetters(['language']), | |||||
dataRule() { | dataRule() { | ||||
return { | return { | ||||
username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], | username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], | ||||
@@ -87,6 +135,20 @@ export default { | |||||
// this.getCaptcha() | // this.getCaptcha() | ||||
}, | }, | ||||
methods: { | 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) { | chLang(lang) { | ||||
switch (lang) { | switch (lang) { | ||||
case 'zh': | 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 => { | .catch(err => { | ||||
this.$message({ | this.$message({ | ||||
@@ -154,3 +217,201 @@ export default { | |||||
} | } | ||||
} | } | ||||
</script> | </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> |