IDCDatasync/IDCDatasync-vue
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

系统名称添加全局配置文件

Browse Source
This commit is contained in:
wangchengming 2025-06-16 22:32:45 +08:00
parent bfb4428b44
commit 542e58347a
5 changed files with 106 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/config.js vendored Normal file
View File

@ -0,0 +1,3 @@
window.AppConfig = {
systemTitle: '末端数据接入处理系统'
}

47
public/index.html vendored
View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title> <title></title>
<link rel="icon" href="<%= BASE_URL %>logo.png"> <link rel="icon" href="<%= BASE_URL %>logo.png">
<script src="<%= BASE_URL %>./config.js"></script>
<script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script> <script src="<%= BASE_URL %>cdn/babel-polyfill/polyfill_7_2_5.js"></script>
<style> <style>
html, html,
@ -16,12 +17,14 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
.chromeframe { .chromeframe {
margin: 0.2em 0; margin: 0.2em 0;
background: #ccc; background: #ccc;
color: #000; color: #000;
padding: 0.2em 0; padding: 0.2em 0;
} }
#loader-wrapper { #loader-wrapper {
position: fixed; position: fixed;
top: 0; top: 0;
@ -30,6 +33,7 @@
height: 100%; height: 100%;
z-index: 999999; z-index: 999999;
} }
#loader { #loader {
display: block; display: block;
position: relative; position: relative;
@ -54,6 +58,7 @@
/* Chrome, Firefox 16+, IE 10+, Opera */ /* Chrome, Firefox 16+, IE 10+, Opera */
z-index: 1001; z-index: 1001;
} }
#loader:before { #loader:before {
content: ""; content: "";
position: absolute; position: absolute;
@ -76,6 +81,7 @@
animation: spin 3s linear infinite; animation: spin 3s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */ /* Chrome, Firefox 16+, IE 10+, Opera */
} }
#loader:after { #loader:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -98,6 +104,7 @@
animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */ /* Chrome, Firefox 16+, IE 10+, Opera */
} }
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -107,6 +114,7 @@
transform: rotate(0deg); transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */ /* Firefox 16+, IE 10+, Opera */
} }
100% { 100% {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */ /* Chrome, Opera 15+, Safari 3.1+ */
@ -116,6 +124,7 @@
/* Firefox 16+, IE 10+, Opera */ /* Firefox 16+, IE 10+, Opera */
} }
} }
@keyframes spin { @keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -125,6 +134,7 @@
transform: rotate(0deg); transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */ /* Firefox 16+, IE 10+, Opera */
} }
100% { 100% {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
/* Chrome, Opera 15+, Safari 3.1+ */ /* Chrome, Opera 15+, Safari 3.1+ */
@ -134,6 +144,7 @@
/* Firefox 16+, IE 10+, Opera */ /* Firefox 16+, IE 10+, Opera */
} }
} }
#loader-wrapper .loader-section { #loader-wrapper .loader-section {
position: fixed; position: fixed;
top: 0; top: 0;
@ -149,12 +160,15 @@
transform: translateX(0); transform: translateX(0);
/* Firefox 16+, IE 10+, Opera */ /* Firefox 16+, IE 10+, Opera */
} }
#loader-wrapper .loader-section.section-left { #loader-wrapper .loader-section.section-left {
left: 0; left: 0;
} }
#loader-wrapper .loader-section.section-right { #loader-wrapper .loader-section.section-right {
right: 0; right: 0;
} }
/* Loaded */ /* Loaded */
.loaded #loader-wrapper .loader-section.section-left { .loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); -webkit-transform: translateX(-100%);
@ -166,6 +180,7 @@
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} }
.loaded #loader-wrapper .loader-section.section-right { .loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
/* Chrome, Opera 15+, Safari 3.1+ */ /* Chrome, Opera 15+, Safari 3.1+ */
@ -176,11 +191,13 @@
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
} }
.loaded #loader { .loaded #loader {
opacity: 0; opacity: 0;
-webkit-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.loaded #loader-wrapper { .loaded #loader-wrapper {
visibility: hidden; visibility: hidden;
-webkit-transform: translateY(-100%); -webkit-transform: translateY(-100%);
@ -192,13 +209,16 @@
-webkit-transition: all 0.3s 1s ease-out; -webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out;
} }
/* JavaScript Turned Off */ /* JavaScript Turned Off */
.no-js #loader-wrapper { .no-js #loader-wrapper {
display: none; display: none;
} }
.no-js h1 { .no-js h1 {
color: #222222; color: #222222;
} }
#loader-wrapper .load_title { #loader-wrapper .load_title {
font-family: 'Open Sans'; font-family: 'Open Sans';
color: #FFF; color: #FFF;
@ -211,6 +231,7 @@
opacity: 1; opacity: 1;
line-height: 30px; line-height: 30px;
} }
#loader-wrapper .load_title span { #loader-wrapper .load_title span {
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
@ -218,25 +239,31 @@
color: #FFF; color: #FFF;
opacity: 0.5; opacity: 0.5;
} }
/* 滚动条优化 start */ /* 滚动条优化 start */
::-webkit-scrollbar{ ::-webkit-scrollbar {
width:8px; width: 8px;
height:8px; height: 8px;
} }
::-webkit-scrollbar-track{
::-webkit-scrollbar-track {
background: #f6f6f6; background: #f6f6f6;
border-radius:2px; border-radius: 2px;
} }
::-webkit-scrollbar-thumb{
::-webkit-scrollbar-thumb {
background: #cdcdcd; background: #cdcdcd;
border-radius:2px; border-radius: 2px;
} }
::-webkit-scrollbar-thumb:hover{
::-webkit-scrollbar-thumb:hover {
background: #747474; background: #747474;
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
background: #f6f6f6; background: #f6f6f6;
} }
/* 滚动条优化 end */ /* 滚动条优化 end */
</style> </style>
<!-- 全局配置 --> <!-- 全局配置 -->
@ -246,7 +273,7 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="loader"></div> <div id="loader"></div>
<div class="loader-section section-left"></div> <div class="loader-section section-left"></div>
@ -255,7 +282,7 @@
</div> </div>
</div> </div>
</div> </div>
</body> </body>

2
src/components/layouts/UserLayout.vue
View File

@ -114,7 +114,7 @@ export default {
.main { .main {
width: 596px; width: 596px;
height: 468px; height: 468px;
margin: 335px 1173px; margin: 400px 1173px;
padding-top: 80px; padding-top: 80px;
background: url(~@/assets/img/login_bg.png) no-repeat; background: url(~@/assets/img/login_bg.png) no-repeat;
} }

39
src/components/page/GlobalHeader.vue
View File

@ -1,21 +1,12 @@
<template> <template>
<!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' --> <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
<a-layout-header <a-layout-header v-if="!headerBarFixed"
v-if="!headerBarFixed" :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]"
:class="[fixedHeader && 'ant-header-fixedHeader',sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]" :style="{ padding: '0' }">
:style="{ padding: '0' }"
>
<div v-if="mode === 'sidemenu'" class="header" :class="theme"> <div v-if="mode === 'sidemenu'" class="header" :class="theme">
<a-icon <a-icon v-if="device === 'mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'"
v-if="device==='mobile'"
class="trigger"
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
@click="toggle"></a-icon> @click="toggle"></a-icon>
<a-icon <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle" />
v-else
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="toggle"/>
<span v-if="device === 'desktop'"></span> <span v-if="device === 'desktop'"></span>
<span v-else>Jeecg-Boot</span> <span v-else>Jeecg-Boot</span>
@ -25,11 +16,12 @@
<!-- 顶部导航栏模式 --> <!-- 顶部导航栏模式 -->
<div v-else :class="['top-nav-header-index', theme]"> <div v-else :class="['top-nav-header-index', theme]">
<div> <div>
<div class="header-index-center header-nowTime" > <img src="~@/assets/img/main-logo.png"/>末端数据接入处理系统</div> <div class="header-index-center header-nowTime"> <img src="~@/assets/img/main-logo.png" />{{ sysTitle }}</div>
<div class="header-index-center" > <div class="header-index-center">
<div class="header-index-wide"> <div class="header-index-wide">
<div class="header-index-center" :style="topMenuStyle.topmenuCenter"> <div class="header-index-center" :style="topMenuStyle.topmenuCenter">
<s-menu mode="horizontal" :menu="menus" :theme="theme" @triggerSubMenuAction="triggerSubMenuAction" @updateMenuTitle="handleUpdateMenuTitle"></s-menu> <s-menu mode="horizontal" :menu="menus" :theme="theme" @triggerSubMenuAction="triggerSubMenuAction"
@updateMenuTitle="handleUpdateMenuTitle"></s-menu>
</div> </div>
</div> </div>
@ -89,6 +81,7 @@ export default {
}, },
data() { data() {
return { return {
sysTitle: null,
headerBarFixed: false, headerBarFixed: false,
nowTime: '', nowTime: '',
nowDate: '', nowDate: '',
@ -125,6 +118,9 @@ export default {
this.buildTopMenuStyle() this.buildTopMenuStyle()
} }
}, },
created() {
this.sysTitle = window.AppConfig.systemTitle
},
methods: { methods: {
handleScroll() { handleScroll() {
if (this.autoHideHeader) { if (this.autoHideHeader) {
@ -183,8 +179,10 @@ export default {
line-height: 64px; line-height: 64px;
} }
} }
.trigger { .trigger {
line-height: 64px; line-height: 64px;
&:hover { &:hover {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
} }
@ -213,14 +211,17 @@ export default {
} }
} }
} }
.header-index-center{
.header-index-center {
text-align: center; text-align: center;
} }
.ant-layout-header { .ant-layout-header {
height: 64px; height: 64px;
line-height: 64px; line-height: 64px;
} }
.header-index-right{
.header-index-right {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: -4px; top: -4px;

50
src/views/user/Login.vue
View File

@ -2,20 +2,22 @@
<div class="main"> <div class="main">
<a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin"> <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
<div class="header"> <div class="header">
<img src="~@/assets/img/logo.png"/> <!-- <img src="~@/assets/img/logo.png"/> -->
<img src="~@/assets/img/main-logo.png" style="width: 336px;height: 160px;" />
<span style="display: block; color: #ffffff; font-size: 48px;">{{ sysTitle }}</span>
</div> </div>
<!-- <div class="name"> <!-- <div class="name">
<span class="title"></span> <span class="title"></span>
</div> --> </div> -->
<a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-right: 100px"> <a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-right: 100px">
<img class="aicon" src="~@/assets/img/icon-账户.png"/> <img class="aicon" src="~@/assets/img/icon-账户.png" />
<div class="inputbg"> <div class="inputbg">
<a-input size="large" v-decorator="['username']" type="text" placeholder="请输入账号"> </a-input> <a-input size="large" v-decorator="['username']" type="text" placeholder="请输入账号"> </a-input>
</div> </div>
</a-form-item> </a-form-item>
<a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-right: 100px"> <a-form-item label=" " :labelCol="labelCol" :wrapperCol="wrapperCol" style="margin-right: 100px">
<img class="aicon" src="~@/assets/img/icon-密码.png"/> <img class="aicon" src="~@/assets/img/icon-密码.png" />
<div class="inputbg"> <div class="inputbg">
<a-input v-decorator="['password']" size="large" type="password" autocomplete="false" placeholder="请输入密码"> <a-input v-decorator="['password']" size="large" type="password" autocomplete="false" placeholder="请输入密码">
</a-input> </a-input>
@ -23,15 +25,8 @@
</a-form-item> </a-form-item>
<a-form-item style="margin-top: 76px; margin-left: 80px"> <a-form-item style="margin-top: 76px; margin-left: 80px">
<a-button <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn"
size="large" @click.stop.prevent="handleSubmit" :disabled="loginBtn">
type="primary"
htmlType="submit"
class="login-button"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn"
>
登录 登录
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -62,6 +57,7 @@ export default {
}, },
data() { data() {
return { return {
sysTitle: null,
customActiveKey: 'tab1', customActiveKey: 'tab1',
loginBtn: false, loginBtn: false,
// login type: 0 email, 1 username, 2 telephone // login type: 0 email, 1 username, 2 telephone
@ -102,6 +98,7 @@ export default {
} }
}, },
created() { created() {
this.sysTitle = window.AppConfig.systemTitle
this.currdatetime = new Date().getTime() this.currdatetime = new Date().getTime()
Vue.ls.remove(ACCESS_TOKEN) Vue.ls.remove(ACCESS_TOKEN)
this.getRouterData() this.getRouterData()
@ -301,23 +298,29 @@ export default {
<style lang="less"> <style lang="less">
.user-layout-login { .user-layout-login {
.header { .header {
width: 596px;
text-align: center;
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 160px; top: 160px;
left: 1230px; // left: 1230px;
left: 1180px;
.title { .title {
font-family: 'REEJI-FlashSansGB-Flash-Heavy'; font-family: 'REEJI-FlashSansGB-Flash-Heavy';
font-weight: 800; font-weight: 800;
font-size: 40px; font-size: 40px;
color: #FFFFFF; color: #FFFFFF;
text-shadow: 0px 3px 8px rgba(4,0,0,0.51); text-shadow: 0px 3px 8px rgba(4, 0, 0, 0.51);
} }
} }
.name { .name {
padding-top: 53px; padding-top: 53px;
height: 110px; height: 110px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
.title { .title {
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
@ -327,9 +330,11 @@ export default {
} }
} }
} }
.user-layout-login .ant-form-item { .user-layout-login .ant-form-item {
margin-bottom: 30px !important; margin-bottom: 30px !important;
} }
.user-layout-login input { .user-layout-login input {
font-size: 20px; font-size: 20px;
width: 444px; width: 444px;
@ -352,20 +357,19 @@ export default {
transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s;
} }
.user-layout-login .inputbg .user-layout-login .inputbg {
{
width: 444px; width: 444px;
height: 60px; height: 60px;
background: url(~@assets/img/login_button.png) !important; background: url(~@assets/img/login_button.png) !important;
} }
.user-layout-login .aicon .user-layout-login .aicon {
{
position: absolute; position: absolute;
left: 30px; left: 30px;
top: 20px; top: 20px;
z-index: 11; z-index: 11;
} }
.user-layout-login input::placeholder { .user-layout-login input::placeholder {
color: #2F6480; color: #2F6480;
} }
@ -375,9 +379,11 @@ export default {
.user-layout-login .valid-error .ant-select-selection__placeholder { .user-layout-login .valid-error .ant-select-selection__placeholder {
color: #f5222d; color: #f5222d;
} }
.user-layout-login .ant-form-item-label { .user-layout-login .ant-form-item-label {
line-height: 50px !important; line-height: 50px !important;
} }
.user-layout-login .ant-form-item-label label { .user-layout-login .ant-form-item-label label {
font-size: 16px !important; font-size: 16px !important;
color: #00c3ff !important; color: #00c3ff !important;
@ -385,16 +391,18 @@ export default {
letter-spacing: 4px !important; letter-spacing: 4px !important;
float: right !important; float: right !important;
} }
.user-layout-login .ant-input-lg { .user-layout-login .ant-input-lg {
height: 60px !important; height: 60px !important;
width: 444px !important; width: 444px !important;
border-radius: 0px; border-radius: 0px;
} }
.user-layout-login .ant-form-item-label > label::after { .user-layout-login .ant-form-item-label>label::after {
content: ''; content: '';
} }
.user-layout-login .login-button{
.user-layout-login .login-button {
width: 444px !important; width: 444px !important;
height: 60px !important; height: 60px !important;
border: none !important; border: none !important;
@ -404,10 +412,12 @@ export default {
line-height: 3px; line-height: 3px;
font-family: 'Microsoft YaHei'; font-family: 'Microsoft YaHei';
} }
.user-layout-login .login-button:hover, .user-layout-login .login-button:hover,
.user-layout-login .login-button:active { .user-layout-login .login-button:active {
background: url(~@assets/img/login_button_hover.png) !important; background: url(~@assets/img/login_button_hover.png) !important;
} }
.user-layout-login .ant-tabs-ink-bar { .user-layout-login .ant-tabs-ink-bar {
display: none !important; display: none !important;
} }