LK/income_payments_enterprise_terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

菜单固定于上方

Browse Source
This commit is contained in:
zhaoxiao
2021-10-21 13:51:22 +08:00
parent e50d4d4f03
commit f7d502d171
4 changed files with 285 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+280 -253
View File
@@ -1,266 +1,293 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<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>
<!-- 全局配置 --> <!-- 全局配置 -->
<% if (process.env.NODE_ENV === 'development' ) { %> <% if (process.env.NODE_ENV === 'development' ) { %>
<script src="<%= BASE_URL %>development_address_config.js"></script> <script src="<%= BASE_URL %>development_address_config.js"></script>
<% } %> <% } %>
<% if (process.env.NODE_ENV === 'production' ) { %> <% if (process.env.NODE_ENV === 'production' ) { %>
<script src="<%= BASE_URL %>production_address_config.js"></script> <script src="<%= BASE_URL %>production_address_config.js"></script>
<% } %> <% } %>
<style> <style>
html, html,
body, body,
#app { #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} /*最小宽度1200*/
.chromeframe { min-width: 1200px;
margin: 0.2em 0; overflow-x: auto;
background: #ccc; }
color: #000;
padding: 0.2em 0; .chromeframe {
} margin: 0.2em 0;
#loader-wrapper { background: #ccc;
position: fixed; color: #000;
top: 0; padding: 0.2em 0;
left: 0; }
width: 100%;
height: 100%; #loader-wrapper {
z-index: 999999; position: fixed;
} top: 0;
#loader { left: 0;
display: block; width: 100%;
position: relative; height: 100%;
left: 50%; z-index: 999999;
top: 50%; }
width: 120px;
height: 120px; #loader {
margin: -75px 0 0 -75px; display: block;
border-radius: 50%; position: relative;
border: 3px solid transparent; left: 50%;
/* COLOR 1 */ top: 50%;
border-top-color: #FFF; width: 120px;
-webkit-animation: spin 2s linear infinite; height: 120px;
/* Chrome, Opera 15+, Safari 5+ */ margin: -75px 0 0 -75px;
-ms-animation: spin 2s linear infinite; border-radius: 50%;
/* Chrome, Opera 15+, Safari 5+ */ border: 3px solid transparent;
-moz-animation: spin 2s linear infinite; /* COLOR 1 */
/* Chrome, Opera 15+, Safari 5+ */ border-top-color: #FFF;
-o-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
/* Chrome, Opera 15+, Safari 5+ */ /* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */ /* Chrome, Opera 15+, Safari 5+ */
z-index: 1001; -moz-animation: spin 2s linear infinite;
} /* Chrome, Opera 15+, Safari 5+ */
#loader:before { -o-animation: spin 2s linear infinite;
content: ""; /* Chrome, Opera 15+, Safari 5+ */
position: absolute; animation: spin 2s linear infinite;
top: 5px; /* Chrome, Firefox 16+, IE 10+, Opera */
left: 5px; z-index: 1001;
right: 5px; }
bottom: 5px;
border-radius: 50%; #loader:before {
border: 3px solid transparent; content: "";
/* COLOR 2 */ position: absolute;
border-top-color: #FFF; top: 5px;
-webkit-animation: spin 3s linear infinite; left: 5px;
/* Chrome, Opera 15+, Safari 5+ */ right: 5px;
-moz-animation: spin 3s linear infinite; bottom: 5px;
/* Chrome, Opera 15+, Safari 5+ */ border-radius: 50%;
-o-animation: spin 3s linear infinite; border: 3px solid transparent;
/* Chrome, Opera 15+, Safari 5+ */ /* COLOR 2 */
-ms-animation: spin 3s linear infinite; border-top-color: #FFF;
/* Chrome, Opera 15+, Safari 5+ */ -webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
/* Chrome, Firefox 16+, IE 10+, Opera */ -moz-animation: spin 3s linear infinite;
} /* Chrome, Opera 15+, Safari 5+ */
#loader:after { -o-animation: spin 3s linear infinite;
content: ""; /* Chrome, Opera 15+, Safari 5+ */
position: absolute; -ms-animation: spin 3s linear infinite;
top: 15px; /* Chrome, Opera 15+, Safari 5+ */
left: 15px; animation: spin 3s linear infinite;
right: 15px; /* Chrome, Firefox 16+, IE 10+, Opera */
bottom: 15px; }
border-radius: 50%;
border: 3px solid transparent; #loader:after {
border-top-color: #FFF; content: "";
/* COLOR 3 */ position: absolute;
-moz-animation: spin 1.5s linear infinite; top: 15px;
/* Chrome, Opera 15+, Safari 5+ */ left: 15px;
-o-animation: spin 1.5s linear infinite; right: 15px;
/* Chrome, Opera 15+, Safari 5+ */ bottom: 15px;
-ms-animation: spin 1.5s linear infinite; border-radius: 50%;
/* Chrome, Opera 15+, Safari 5+ */ border: 3px solid transparent;
-webkit-animation: spin 1.5s linear infinite; border-top-color: #FFF;
/* Chrome, Opera 15+, Safari 5+ */ /* COLOR 3 */
animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite;
/* Chrome, Firefox 16+, IE 10+, Opera */ /* Chrome, Opera 15+, Safari 5+ */
} -o-animation: spin 1.5s linear infinite;
@-webkit-keyframes spin { /* Chrome, Opera 15+, Safari 5+ */
0% { -ms-animation: spin 1.5s linear infinite;
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 5+ */
/* Chrome, Opera 15+, Safari 3.1+ */ -webkit-animation: spin 1.5s linear infinite;
-ms-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 5+ */
/* IE 9 */ animation: spin 1.5s linear infinite;
transform: rotate(0deg); /* Chrome, Firefox 16+, IE 10+, Opera */
/* Firefox 16+, IE 10+, Opera */ }
}
100% { @-webkit-keyframes spin {
-webkit-transform: rotate(360deg); 0% {
/* Chrome, Opera 15+, Safari 3.1+ */ -webkit-transform: rotate(0deg);
-ms-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
/* IE 9 */ -ms-transform: rotate(0deg);
transform: rotate(360deg); /* IE 9 */
/* Firefox 16+, IE 10+, Opera */ transform: rotate(0deg);
} /* Firefox 16+, IE 10+, Opera */
} }
@keyframes spin { 100% {
0% { -webkit-transform: rotate(360deg);
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
/* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(360deg);
-ms-transform: rotate(0deg); /* IE 9 */
/* IE 9 */ transform: rotate(360deg);
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
/* Firefox 16+, IE 10+, Opera */ }
} }
100% {
-webkit-transform: rotate(360deg); @keyframes spin {
/* Chrome, Opera 15+, Safari 3.1+ */ 0% {
-ms-transform: rotate(360deg); -webkit-transform: rotate(0deg);
/* IE 9 */ /* Chrome, Opera 15+, Safari 3.1+ */
transform: rotate(360deg); -ms-transform: rotate(0deg);
/* Firefox 16+, IE 10+, Opera */ /* IE 9 */
} transform: rotate(0deg);
} /* Firefox 16+, IE 10+, Opera */
#loader-wrapper .loader-section { }
position: fixed; 100% {
top: 0; -webkit-transform: rotate(360deg);
width: 51%; /* Chrome, Opera 15+, Safari 3.1+ */
height: 100%; -ms-transform: rotate(360deg);
background: #069F99; /* IE 9 */
/* Old browsers */ transform: rotate(360deg);
z-index: 1000; /* Firefox 16+, IE 10+, Opera */
-webkit-transform: translateX(0); }
/* Chrome, Opera 15+, Safari 3.1+ */ }
-ms-transform: translateX(0);
/* IE 9 */ #loader-wrapper .loader-section {
transform: translateX(0); position: fixed;
/* Firefox 16+, IE 10+, Opera */ top: 0;
} width: 51%;
#loader-wrapper .loader-section.section-left { height: 100%;
left: 0; background: #069F99;
} /* Old browsers */
#loader-wrapper .loader-section.section-right { z-index: 1000;
right: 0; -webkit-transform: translateX(0);
} /* Chrome, Opera 15+, Safari 3.1+ */
/* Loaded */ -ms-transform: translateX(0);
.loaded #loader-wrapper .loader-section.section-left { /* IE 9 */
-webkit-transform: translateX(-100%); transform: translateX(0);
/* Chrome, Opera 15+, Safari 3.1+ */ /* Firefox 16+, IE 10+, Opera */
-ms-transform: translateX(-100%); }
/* IE 9 */
transform: translateX(-100%); #loader-wrapper .loader-section.section-left {
/* Firefox 16+, IE 10+, Opera */ left: 0;
-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);
} #loader-wrapper .loader-section.section-right {
.loaded #loader-wrapper .loader-section.section-right { right: 0;
-webkit-transform: translateX(100%); }
/* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%); /* Loaded */
/* IE 9 */ .loaded #loader-wrapper .loader-section.section-left {
transform: translateX(100%); -webkit-transform: translateX(-100%);
/* Firefox 16+, IE 10+, Opera */ /* Chrome, Opera 15+, Safari 3.1+ */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -ms-transform: translateX(-100%);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* IE 9 */
} transform: translateX(-100%);
.loaded #loader { /* Firefox 16+, IE 10+, Opera */
opacity: 0; -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.3s ease-out; transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.3s ease-out; }
}
.loaded #loader-wrapper { .loaded #loader-wrapper .loader-section.section-right {
visibility: hidden; -webkit-transform: translateX(100%);
-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
/* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(100%);
-ms-transform: translateY(-100%); /* IE 9 */
/* IE 9 */ transform: translateX(100%);
transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
/* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.3s 1s ease-out; transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.3s 1s ease-out; }
}
/* JavaScript Turned Off */ .loaded #loader {
.no-js #loader-wrapper { opacity: 0;
display: none; -webkit-transition: all 0.3s ease-out;
} transition: all 0.3s ease-out;
.no-js h1 { }
color: #222222;
} .loaded #loader-wrapper {
#loader-wrapper .load_title { visibility: hidden;
font-family: 'Open Sans'; -webkit-transform: translateY(-100%);
color: #FFF; /* Chrome, Opera 15+, Safari 3.1+ */
font-size: 14px; -ms-transform: translateY(-100%);
width: 100%; /* IE 9 */
text-align: center; transform: translateY(-100%);
z-index: 9999999999999; /* Firefox 16+, IE 10+, Opera */
position: absolute; -webkit-transition: all 0.3s 1s ease-out;
top: 60%; transition: all 0.3s 1s ease-out;
opacity: 1; }
line-height: 30px;
} /* JavaScript Turned Off */
#loader-wrapper .load_title span { .no-js #loader-wrapper {
font-weight: normal; display: none;
font-style: italic; }
font-size: 14px;
color: #FFF; .no-js h1 {
opacity: 0.5; color: #222222;
} }
/* 滚动条优化 start */
::-webkit-scrollbar{ #loader-wrapper .load_title {
width:8px; font-family: 'Open Sans';
height:8px; color: #FFF;
} font-size: 14px;
::-webkit-scrollbar-track{ width: 100%;
background: #f6f6f6; text-align: center;
border-radius:2px; z-index: 9999999999999;
} position: absolute;
::-webkit-scrollbar-thumb{ top: 60%;
background: #cdcdcd; opacity: 1;
border-radius:2px; line-height: 30px;
} }
::-webkit-scrollbar-thumb:hover{
background: #747474; #loader-wrapper .load_title span {
} font-weight: normal;
::-webkit-scrollbar-corner { font-style: italic;
background: #f6f6f6; font-size: 14px;
} color: #FFF;
/* 滚动条优化 end */ opacity: 0.5;
</style> }
/* 滚动条优化 start */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f6f6f6;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background: #cdcdcd;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: #747474;
}
::-webkit-scrollbar-corner {
background: #f6f6f6;
}
/* 滚动条优化 end */
</style>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong> Please enable it to continue.</strong>
</noscript> </noscript>
<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>
<div class="loader-section section-right"></div> <div class="loader-section section-right"></div>
<div class="load_title">正在加载,请耐心等待 <div class="load_title">正在加载,请耐心等待
</div>
</div> </div>
</div>
</div> </div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
src/assets/less/common.less
+1
View File
@@ -118,5 +118,6 @@
color: #069f99; color: #069f99;
overflow: hidden; overflow: hidden;
word-break: keep-all; word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
src/components/page/GlobalLayout.vue
+1 -1
View File
@@ -191,7 +191,7 @@ body {
} }
.layout { .layout {
min-height: 100vh !important; min-height: calc(100vh - 10px) !important;
overflow-x: hidden; overflow-x: hidden;
&.mobile { &.mobile {
src/utils/device.js
+3 -2
View File
@@ -16,8 +16,9 @@ const enquireScreen = function (call) {
call && call(1) call && call(1)
} }
} }
enquireJs.register('screen and (max-width: 1087.99px)', handler) // 将max-width设为0，防止转换为手机模式，将菜单隐藏至左侧
enquireJs.register('screen and (max-width: 767.99px)', handler2) enquireJs.register('screen and (max-width: 0px)', handler)
enquireJs.register('screen and (max-width: 0px)', handler2)
} }
export default enquireScreen export default enquireScreen