@@ -1,215 +1,218 @@ | |||||
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<html> | <html> | ||||
<head> | |||||
<meta charset="utf-8" /> | |||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |||||
<meta name="renderer" content="webkit" /> | |||||
<meta | |||||
name="viewport" | |||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | |||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> | |||||
<title><%= webpackConfig.name %></title> | |||||
<!--[if lt IE 11]> | |||||
<head> | |||||
<meta charset="utf-8" /> | |||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |||||
<meta name="renderer" content="webkit" /> | |||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> | |||||
<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css"> | |||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" /> | |||||
<title> | |||||
<%= webpackConfig.name %> | |||||
</title> | |||||
<!--[if lt IE 11]> | |||||
<script> | <script> | ||||
window.location.href = 'html/ie.html'; | window.location.href = 'html/ie.html'; | ||||
</script> | </script> | ||||
<![endif]--> | <![endif]--> | ||||
<style> | |||||
html, | |||||
body, | |||||
#app { | |||||
height: 100%; | |||||
margin: 0px; | |||||
padding: 0px; | |||||
} | |||||
.chromeframe { | |||||
margin: 0.2em 0; | |||||
background: #ccc; | |||||
color: #000; | |||||
padding: 0.2em 0; | |||||
} | |||||
#loader-wrapper { | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 999999; | |||||
} | |||||
#loader { | |||||
display: block; | |||||
position: relative; | |||||
left: 50%; | |||||
top: 50%; | |||||
width: 150px; | |||||
height: 150px; | |||||
margin: -75px 0 0 -75px; | |||||
border-radius: 50%; | |||||
border: 3px solid transparent; | |||||
border-top-color: #fff; | |||||
-webkit-animation: spin 2s linear infinite; | |||||
-ms-animation: spin 2s linear infinite; | |||||
-moz-animation: spin 2s linear infinite; | |||||
-o-animation: spin 2s linear infinite; | |||||
animation: spin 2s linear infinite; | |||||
z-index: 1001; | |||||
} | |||||
#loader:before { | |||||
content: ''; | |||||
position: absolute; | |||||
top: 5px; | |||||
left: 5px; | |||||
right: 5px; | |||||
bottom: 5px; | |||||
border-radius: 50%; | |||||
border: 3px solid transparent; | |||||
border-top-color: #fff; | |||||
-webkit-animation: spin 3s linear infinite; | |||||
-moz-animation: spin 3s linear infinite; | |||||
-o-animation: spin 3s linear infinite; | |||||
-ms-animation: spin 3s linear infinite; | |||||
animation: spin 3s linear infinite; | |||||
} | |||||
#loader:after { | |||||
content: ''; | |||||
position: absolute; | |||||
top: 15px; | |||||
left: 15px; | |||||
right: 15px; | |||||
bottom: 15px; | |||||
border-radius: 50%; | |||||
border: 3px solid transparent; | |||||
border-top-color: #fff; | |||||
-moz-animation: spin 1.5s linear infinite; | |||||
-o-animation: spin 1.5s linear infinite; | |||||
-ms-animation: spin 1.5s linear infinite; | |||||
-webkit-animation: spin 1.5s linear infinite; | |||||
animation: spin 1.5s linear infinite; | |||||
} | |||||
@-webkit-keyframes spin { | |||||
0% { | |||||
-webkit-transform: rotate(0deg); | |||||
-ms-transform: rotate(0deg); | |||||
transform: rotate(0deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(360deg); | |||||
-ms-transform: rotate(360deg); | |||||
transform: rotate(360deg); | |||||
} | |||||
} | |||||
@keyframes spin { | |||||
0% { | |||||
-webkit-transform: rotate(0deg); | |||||
-ms-transform: rotate(0deg); | |||||
transform: rotate(0deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(360deg); | |||||
-ms-transform: rotate(360deg); | |||||
transform: rotate(360deg); | |||||
} | |||||
} | |||||
#loader-wrapper .loader-section { | |||||
position: fixed; | |||||
top: 0; | |||||
width: 51%; | |||||
height: 100%; | |||||
background: #7171c6; | |||||
z-index: 1000; | |||||
-webkit-transform: translateX(0); | |||||
-ms-transform: translateX(0); | |||||
transform: translateX(0); | |||||
} | |||||
#loader-wrapper .loader-section.section-left { | |||||
left: 0; | |||||
} | |||||
#loader-wrapper .loader-section.section-right { | |||||
right: 0; | |||||
} | |||||
.loaded #loader-wrapper .loader-section.section-left { | |||||
-webkit-transform: translateX(-100%); | |||||
-ms-transform: translateX(-100%); | |||||
transform: translateX(-100%); | |||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
} | |||||
.loaded #loader-wrapper .loader-section.section-right { | |||||
-webkit-transform: translateX(100%); | |||||
-ms-transform: translateX(100%); | |||||
transform: translateX(100%); | |||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
} | |||||
.loaded #loader { | |||||
opacity: 0; | |||||
-webkit-transition: all 0.3s ease-out; | |||||
transition: all 0.3s ease-out; | |||||
} | |||||
.loaded #loader-wrapper { | |||||
visibility: hidden; | |||||
-webkit-transform: translateY(-100%); | |||||
-ms-transform: translateY(-100%); | |||||
transform: translateY(-100%); | |||||
-webkit-transition: all 0.3s 1s ease-out; | |||||
transition: all 0.3s 1s ease-out; | |||||
} | |||||
.no-js #loader-wrapper { | |||||
display: none; | |||||
} | |||||
.no-js h1 { | |||||
color: #222222; | |||||
} | |||||
#loader-wrapper .load_title { | |||||
font-family: 'Open Sans'; | |||||
color: #fff; | |||||
font-size: 19px; | |||||
width: 100%; | |||||
text-align: center; | |||||
z-index: 9999999999999; | |||||
position: absolute; | |||||
top: 60%; | |||||
opacity: 1; | |||||
line-height: 30px; | |||||
} | |||||
#loader-wrapper .load_title span { | |||||
font-weight: normal; | |||||
font-style: italic; | |||||
font-size: 13px; | |||||
color: #fff; | |||||
opacity: 0.5; | |||||
} | |||||
</style> | |||||
</head> | |||||
<body> | |||||
<div id="app"> | |||||
<div id="loader-wrapper"> | |||||
<div id="loader"></div> | |||||
<div class="loader-section section-left"></div> | |||||
<div class="loader-section section-right"></div> | |||||
<div class="load_title">正在加载系统资源,请耐心等待</div> | |||||
</div> | |||||
<style> | |||||
html, | |||||
body, | |||||
#app { | |||||
height: 100%; | |||||
margin: 0px; | |||||
padding: 0px; | |||||
} | |||||
.chromeframe { | |||||
margin: 0.2em 0; | |||||
background: #ccc; | |||||
color: #000; | |||||
padding: 0.2em 0; | |||||
} | |||||
#loader-wrapper { | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 999999; | |||||
} | |||||
#loader { | |||||
display: block; | |||||
position: relative; | |||||
left: 50%; | |||||
top: 50%; | |||||
width: 150px; | |||||
height: 150px; | |||||
margin: -75px 0 0 -75px; | |||||
border-radius: 50%; | |||||
border: 3px solid transparent; | |||||
border-top-color: #fff; | |||||
-webkit-animation: spin 2s linear infinite; | |||||
-ms-animation: spin 2s linear infinite; | |||||
-moz-animation: spin 2s linear infinite; | |||||
-o-animation: spin 2s linear infinite; | |||||
animation: spin 2s linear infinite; | |||||
z-index: 1001; | |||||
} | |||||
#loader:before { | |||||
content: ''; | |||||
position: absolute; | |||||
top: 5px; | |||||
left: 5px; | |||||
right: 5px; | |||||
bottom: 5px; | |||||
border-radius: 50%; | |||||
border: 3px solid transparent; | |||||
border-top-color: #fff; | |||||
-webkit-animation: spin 3s linear infinite; | |||||
-moz-animation: spin 3s linear infinite; | |||||
-o-animation: spin 3s linear infinite; | |||||
-ms-animation: spin 3s linear infinite; | |||||
animation: spin 3s linear infinite; | |||||
} | |||||
#loader:after { | |||||
content: ''; | |||||
position: absolute; | |||||
top: 15px; | |||||
left: 15px; | |||||
right: 15px; | |||||
bottom: 15px; | |||||
border-radius: 50%; | |||||
border: 3px solid transparent; | |||||
border-top-color: #fff; | |||||
-moz-animation: spin 1.5s linear infinite; | |||||
-o-animation: spin 1.5s linear infinite; | |||||
-ms-animation: spin 1.5s linear infinite; | |||||
-webkit-animation: spin 1.5s linear infinite; | |||||
animation: spin 1.5s linear infinite; | |||||
} | |||||
@-webkit-keyframes spin { | |||||
0% { | |||||
-webkit-transform: rotate(0deg); | |||||
-ms-transform: rotate(0deg); | |||||
transform: rotate(0deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(360deg); | |||||
-ms-transform: rotate(360deg); | |||||
transform: rotate(360deg); | |||||
} | |||||
} | |||||
@keyframes spin { | |||||
0% { | |||||
-webkit-transform: rotate(0deg); | |||||
-ms-transform: rotate(0deg); | |||||
transform: rotate(0deg); | |||||
} | |||||
100% { | |||||
-webkit-transform: rotate(360deg); | |||||
-ms-transform: rotate(360deg); | |||||
transform: rotate(360deg); | |||||
} | |||||
} | |||||
#loader-wrapper .loader-section { | |||||
position: fixed; | |||||
top: 0; | |||||
width: 51%; | |||||
height: 100%; | |||||
background: #7171c6; | |||||
z-index: 1000; | |||||
-webkit-transform: translateX(0); | |||||
-ms-transform: translateX(0); | |||||
transform: translateX(0); | |||||
} | |||||
#loader-wrapper .loader-section.section-left { | |||||
left: 0; | |||||
} | |||||
#loader-wrapper .loader-section.section-right { | |||||
right: 0; | |||||
} | |||||
.loaded #loader-wrapper .loader-section.section-left { | |||||
-webkit-transform: translateX(-100%); | |||||
-ms-transform: translateX(-100%); | |||||
transform: translateX(-100%); | |||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
} | |||||
.loaded #loader-wrapper .loader-section.section-right { | |||||
-webkit-transform: translateX(100%); | |||||
-ms-transform: translateX(100%); | |||||
transform: translateX(100%); | |||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); | |||||
} | |||||
.loaded #loader { | |||||
opacity: 0; | |||||
-webkit-transition: all 0.3s ease-out; | |||||
transition: all 0.3s ease-out; | |||||
} | |||||
.loaded #loader-wrapper { | |||||
visibility: hidden; | |||||
-webkit-transform: translateY(-100%); | |||||
-ms-transform: translateY(-100%); | |||||
transform: translateY(-100%); | |||||
-webkit-transition: all 0.3s 1s ease-out; | |||||
transition: all 0.3s 1s ease-out; | |||||
} | |||||
.no-js #loader-wrapper { | |||||
display: none; | |||||
} | |||||
.no-js h1 { | |||||
color: #222222; | |||||
} | |||||
#loader-wrapper .load_title { | |||||
font-family: 'Open Sans'; | |||||
color: #fff; | |||||
font-size: 19px; | |||||
width: 100%; | |||||
text-align: center; | |||||
z-index: 9999999999999; | |||||
position: absolute; | |||||
top: 60%; | |||||
opacity: 1; | |||||
line-height: 30px; | |||||
} | |||||
#loader-wrapper .load_title span { | |||||
font-weight: normal; | |||||
font-style: italic; | |||||
font-size: 13px; | |||||
color: #fff; | |||||
opacity: 0.5; | |||||
} | |||||
</style> | |||||
</head> | |||||
<body> | |||||
<div id="app"> | |||||
<div id="loader-wrapper"> | |||||
<div id="loader"></div> | |||||
<div class="loader-section section-left"></div> | |||||
<div class="loader-section section-right"></div> | |||||
<div class="load_title">正在加载系统资源,请耐心等待</div> | |||||
</div> | </div> | ||||
</body> | |||||
</html> | |||||
</div> | |||||
</body> | |||||
</html> |
@@ -0,0 +1,339 @@ | |||||
@media print { | |||||
body { | |||||
margin: 0px; | |||||
padding: 0px; | |||||
} | |||||
} | |||||
@page { | |||||
margin: 0; | |||||
} | |||||
.hiprint-printPaper * { | |||||
box-sizing: border-box; | |||||
-moz-box-sizing: border-box; /* Firefox */ | |||||
-webkit-box-sizing: border-box; /* Safari */ | |||||
} | |||||
.hiprint-printPaper *:focus { | |||||
outline: -webkit-focus-ring-color auto 0px; | |||||
} | |||||
.hiprint-printPaper { | |||||
position: relative; | |||||
padding: 0 0 0 0; | |||||
page-break-after: always; | |||||
-webkit-user-select: none; /* Chrome/Safari/Opera */ | |||||
-moz-user-select: none; /* Firefox */ | |||||
user-select: none; | |||||
overflow-x: hidden; | |||||
overflow: hidden; | |||||
} | |||||
.hiprint-printPaper .hiprint-printPaper-content { | |||||
position: relative; | |||||
} | |||||
/* 火狐浏览器打印 第一页过后 重叠问题 */ | |||||
@-moz-document url-prefix() { | |||||
.hiprint-printPaper .hiprint-printPaper-content { | |||||
position: relative; | |||||
margin-top: 20px; | |||||
top: -20px | |||||
} | |||||
} | |||||
.hiprint-printPaper.design { | |||||
overflow: visible; | |||||
} | |||||
.hiprint-printTemplate .hiprint-printPanel { | |||||
page-break-after: always; | |||||
} | |||||
.hiprint-printPaper, hiprint-printPanel { | |||||
box-sizing: border-box; | |||||
border: 0px; | |||||
} | |||||
.hiprint-printPanel .hiprint-printPaper:last-child { | |||||
page-break-after: avoid; | |||||
} | |||||
.hiprint-printTemplate .hiprint-printPanel:last-child { | |||||
page-break-after: avoid; | |||||
} | |||||
.hiprint-printPaper .hideheaderLinetarget { | |||||
border-top: 0px dashed rgb(201, 190, 190) !important; | |||||
} | |||||
.hiprint-printPaper .hidefooterLinetarget { | |||||
border-top: 0px dashed rgb(201, 190, 190) !important; | |||||
} | |||||
.hiprint-printPaper.design { | |||||
border: 1px dashed rgba(170, 170, 170, 0.7); | |||||
} | |||||
.design .hiprint-printElement-table-content, .design .hiprint-printElement-longText-content { | |||||
overflow: hidden; | |||||
box-sizing: border-box; | |||||
} | |||||
.design .resize-panel { | |||||
box-sizing: border-box; | |||||
border: 1px dotted; | |||||
} | |||||
.hiprint-printElement-text { | |||||
background-color: transparent; | |||||
background-repeat: repeat; | |||||
padding: 0 0 0 0; | |||||
border: 0.75pt none rgb(0, 0, 0); | |||||
direction: ltr; | |||||
font-family: 'SimSun'; | |||||
font-size: 9pt; | |||||
font-style: normal; | |||||
font-weight: normal; | |||||
padding-bottom: 0pt; | |||||
padding-left: 0pt; | |||||
padding-right: 0pt; | |||||
padding-top: 0pt; | |||||
text-align: left; | |||||
text-decoration: none; | |||||
line-height: 9.75pt; | |||||
box-sizing: border-box; | |||||
word-wrap: break-word; | |||||
word-break: break-all; | |||||
} | |||||
.design .hiprint-printElement-text-content { | |||||
border: 1px dashed rgb(206, 188, 188); | |||||
box-sizing: border-box; | |||||
} | |||||
.hiprint-printElement-longText { | |||||
background-color: transparent; | |||||
background-repeat: repeat; | |||||
border: 0.75pt none rgb(0, 0, 0); | |||||
direction: ltr; | |||||
font-family: 'SimSun'; | |||||
font-size: 9pt; | |||||
font-style: normal; | |||||
font-weight: normal; | |||||
padding-bottom: 0pt; | |||||
padding-left: 0pt; | |||||
padding-right: 0pt; | |||||
padding-top: 0pt; | |||||
text-align: left; | |||||
text-decoration: none; | |||||
line-height: 9.75pt; | |||||
box-sizing: border-box; | |||||
word-wrap: break-word; | |||||
word-break: break-all; | |||||
/*white-space: pre-wrap*/ | |||||
} | |||||
.hiprint-printElement-table { | |||||
background-color: transparent; | |||||
background-repeat: repeat; | |||||
color: rgb(0, 0, 0); | |||||
border-color: rgb(0, 0, 0); | |||||
border-style: none; | |||||
direction: ltr; | |||||
font-family: 'SimSun'; | |||||
font-size: 9pt; | |||||
font-style: normal; | |||||
font-weight: normal; | |||||
padding-bottom: 0pt; | |||||
padding-left: 0pt; | |||||
padding-right: 0pt; | |||||
padding-top: 0pt; | |||||
text-align: left; | |||||
text-decoration: none; | |||||
padding: 0 0 0 0; | |||||
box-sizing: border-box; | |||||
line-height: 9.75pt; | |||||
} | |||||
.hiprint-printElement-table thead { | |||||
background: #e8e8e8; | |||||
font-weight: 700; | |||||
} | |||||
.hiprint-printElement-tableTarget, .hiprint-printElement-tableTarget tr, .hiprint-printElement-tableTarget td { | |||||
border-color: rgb(0, 0, 0); | |||||
/*border-style: none;*/ | |||||
/*border: 1px solid rgb(0, 0, 0);*/ | |||||
font-weight: normal; | |||||
direction: ltr; | |||||
padding-bottom: 0pt; | |||||
padding-left: 4pt; | |||||
padding-right: 4pt; | |||||
padding-top: 0pt; | |||||
text-decoration: none; | |||||
vertical-align: middle; | |||||
box-sizing: border-box; | |||||
word-wrap: break-word; | |||||
word-break: break-all; | |||||
/*line-height: 9.75pt; | |||||
font-size: 9pt;*/ | |||||
} | |||||
.hiprint-printElement-tableTarget-border-all { | |||||
border: 1px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-none { | |||||
border: 0px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-lr { | |||||
border-left: 1px solid; | |||||
border-right: 1px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-left { | |||||
border-left: 1px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-right { | |||||
border-right: 1px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-tb { | |||||
border-top: 1px solid; | |||||
border-bottom: 1px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-top { | |||||
border-top: 1px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-bottom { | |||||
border-bottom: 1px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-td-none td { | |||||
border: 0px solid; | |||||
} | |||||
.hiprint-printElement-tableTarget-border-td-all td:not(:last-child) { | |||||
border-right: 1px solid; | |||||
} | |||||
/*.hiprint-printElement-tableTarget tr,*/ | |||||
.hiprint-printElement-tableTarget td { | |||||
height: 18pt; | |||||
} | |||||
.hiprint-printPaper .hiprint-paperNumber { | |||||
font-size: 9pt; | |||||
} | |||||
.design .hiprint-printElement-table-handle { | |||||
position: absolute; | |||||
height: 21pt; | |||||
width: 21pt; | |||||
background: red; | |||||
z-index: 1; | |||||
} | |||||
.hiprint-printPaper .hiprint-paperNumber-disabled { | |||||
float: right !important; | |||||
right: 0 !important; | |||||
color: gainsboro !important; | |||||
} | |||||
.hiprint-printElement-vline, .hiprint-printElement-hline { | |||||
border: 0px none rgb(0, 0, 0); | |||||
} | |||||
.hiprint-printElement-vline { | |||||
border-left: 0.75pt solid #000; | |||||
border-right: 0px none rgb(0, 0, 0) !important; | |||||
border-bottom: 0px none rgb(0, 0, 0) !important; | |||||
border-top: 0px none rgb(0, 0, 0) !important; | |||||
} | |||||
.hiprint-printElement-hline { | |||||
border-top: 0.75pt solid #000; | |||||
border-right: 0px none rgb(0, 0, 0) !important; | |||||
border-bottom: 0px none rgb(0, 0, 0) !important; | |||||
border-left: 0px none rgb(0, 0, 0) !important; | |||||
} | |||||
.hiprint-printElement-oval, .hiprint-printElement-rect { | |||||
border: 0.75pt solid #000; | |||||
} | |||||
.hiprint-text-content-middle { | |||||
} | |||||
.hiprint-text-content-middle > div { | |||||
display: grid; | |||||
align-items: center; | |||||
} | |||||
.hiprint-text-content-bottom { | |||||
} | |||||
.hiprint-text-content-bottom > div { | |||||
display: grid; | |||||
align-items: flex-end; | |||||
} | |||||
.hiprint-text-content-wrap { | |||||
} | |||||
.hiprint-text-content-wrap .hiprint-text-content-wrap-nowrap { | |||||
white-space: nowrap; | |||||
} | |||||
.hiprint-text-content-wrap .hiprint-text-content-wrap-clip { | |||||
white-space: nowrap; | |||||
overflow: hidden; | |||||
text-overflow: clip; | |||||
} | |||||
.hiprint-text-content-wrap .hiprint-text-content-wrap-ellipsis { | |||||
white-space: nowrap; | |||||
overflow: hidden; | |||||
text-overflow: ellipsis; | |||||
} | |||||
/*hi-grid-row */ | |||||
.hi-grid-row { | |||||
position: relative; | |||||
height: auto; | |||||
margin-right: 0; | |||||
margin-left: 0; | |||||
zoom: 1; | |||||
display: block; | |||||
box-sizing: border-box; | |||||
} | |||||
.hi-grid-row::after, .hi-grid-row::before { | |||||
display: table; | |||||
content: ''; | |||||
box-sizing: border-box; | |||||
} | |||||
.hi-grid-col { | |||||
display: block; | |||||
box-sizing: border-box; | |||||
position: relative; | |||||
float: left; | |||||
flex: 0 0 auto; | |||||
} | |||||
.table-grid-row { | |||||
margin-left: -0pt; | |||||
margin-right: -0pt; | |||||
} | |||||
.tableGridColumnsGutterRow { | |||||
padding-left: 0pt; | |||||
padding-right: 0pt; | |||||
} | |||||
.hiprint-gridColumnsFooter { | |||||
text-align: left; | |||||
clear: both; | |||||
} |
@@ -11,14 +11,26 @@ | |||||
<NavMenu @action="handleAction" :menu="menu" /> | <NavMenu @action="handleAction" :menu="menu" /> | ||||
</section> | </section> | ||||
<section id="main-panel"> | <section id="main-panel"> | ||||
<section id="left-panel"></section> | |||||
<section id="left-panel"> | |||||
<h2>组件</h2> | |||||
<div id="components"></div> | |||||
</section> | |||||
<section id="edit-panel"></section> | <section id="edit-panel"></section> | ||||
<section id="right-panel"></section> | |||||
<section id="right-panel"> | |||||
<h2>设置</h2> | |||||
<div id="settings"></div> | |||||
</section> | |||||
</section> | </section> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint"; | |||||
hiprint.init({ | |||||
providers: [defaultElementTypeProvider()], | |||||
}); | |||||
const NavSelector = { | const NavSelector = { | ||||
name: 'NavSelector', | name: 'NavSelector', | ||||
props: ['name', 'options'], | props: ['name', 'options'], | ||||
@@ -29,12 +41,13 @@ const NavSelector = { | |||||
}, | }, | ||||
methods: { | methods: { | ||||
handleOpen() { | handleOpen() { | ||||
this.$emit('closeOtherMenu', this) | |||||
// this.$emit('closeOtherMenu', this) | |||||
// this.$emit('hover', this) | |||||
this.open = !this.open; | this.open = !this.open; | ||||
}, | }, | ||||
handleClickItem(e) { | |||||
this.$emit('click', e.target.innerText) | |||||
}, | |||||
handleClickItem(e) { | |||||
this.$emit('click', e.target.innerText) | |||||
}, | |||||
// 暴露一个close方法,供父组件调用 | // 暴露一个close方法,供父组件调用 | ||||
closeSubMenu() { | closeSubMenu() { | ||||
this.open = false; | this.open = false; | ||||
@@ -42,7 +55,7 @@ const NavSelector = { | |||||
}, | }, | ||||
render: function (h) { | render: function (h) { | ||||
return ( | return ( | ||||
<li class={'nav-selector__item'} onClick={this.handleOpen}> | |||||
<li class={'nav-selector__item'} onMouseenter={this.handleOpen} onMouseleave={this.handleOpen}> | |||||
<span class={'nav-selector__name'}>{this.name}</span> | <span class={'nav-selector__name'}>{this.name}</span> | ||||
<ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}> | <ul class={`${this.open ? '' : 'hidden'} nav-selector__submenu-items`}> | ||||
{this.options.map((item) => { | {this.options.map((item) => { | ||||
@@ -59,20 +72,20 @@ const NavMenu = { | |||||
props: ['menu'], | props: ['menu'], | ||||
components: { NavSelector }, | components: { NavSelector }, | ||||
data() { | data() { | ||||
return {} | |||||
}, | |||||
return {} | |||||
}, | |||||
methods: { | methods: { | ||||
handleCloseOtherMenu(vueInstance) { | |||||
this.$children.forEach(vm => { | |||||
if (vm != vueInstance) { | |||||
vm.closeSubMenu() | |||||
} | |||||
}) | |||||
}, | |||||
handleItemClicked(e) { | |||||
this.$emit('action', e); | |||||
} | |||||
}, | |||||
handleCloseOtherMenu(vueInstance) { | |||||
this.$children.forEach(vm => { | |||||
if (vm != vueInstance) { | |||||
vm.closeSubMenu() | |||||
} | |||||
}) | |||||
}, | |||||
handleItemClicked(e) { | |||||
this.$emit('action', e); | |||||
} | |||||
}, | |||||
render: function (h) { | render: function (h) { | ||||
return ( | return ( | ||||
<ul class={'nav-menu'}> | <ul class={'nav-menu'}> | ||||
@@ -85,11 +98,12 @@ const NavMenu = { | |||||
}; | }; | ||||
export default { | export default { | ||||
name: 'PrintDesignPage ', | |||||
name: 'PrintDesignPage', | |||||
components: { NavMenu }, | components: { NavMenu }, | ||||
props: {}, | props: {}, | ||||
data() { | data() { | ||||
return { | return { | ||||
hiprintTemplate: null, | |||||
menu: [ | menu: [ | ||||
{ | { | ||||
name: '菜单', | name: '菜单', | ||||
@@ -103,11 +117,28 @@ export default { | |||||
}; | }; | ||||
}, | }, | ||||
computed: {}, | computed: {}, | ||||
mounted() { | |||||
this.loadSideBar(); | |||||
this.loadDesigner(); | |||||
}, | |||||
methods: { | methods: { | ||||
handleAction(name) { | |||||
console.log('name', name) | |||||
} | |||||
}, | |||||
loadDesigner() { | |||||
$("#edit-panel").empty(); | |||||
this.hiprintTemplate = new hiprint.PrintTemplate({ | |||||
settingContainer: "#settings", | |||||
}); | |||||
this.hiprintTemplate.design("#edit-panel"); | |||||
}, | |||||
loadSideBar() { | |||||
this.loadProviders(); | |||||
this.loadSettings(); | |||||
}, | |||||
loadProviders() { }, | |||||
loadSettings() { }, | |||||
handleAction(name) { | |||||
console.log('name', name) | |||||
} | |||||
}, | |||||
}; | }; | ||||
</script> | </script> | ||||
@@ -122,7 +153,7 @@ export default { | |||||
height: 1px; | height: 1px; | ||||
flex: 1; | flex: 1; | ||||
display: grid; | display: grid; | ||||
grid-template-columns: 200px 1fr 200px; | |||||
grid-template-columns: 1fr 3fr 1fr; | |||||
grid-auto-rows: 1fr; | grid-auto-rows: 1fr; | ||||
grid-template-areas: 'left main right'; | grid-template-areas: 'left main right'; | ||||
} | } | ||||
@@ -133,43 +164,68 @@ export default { | |||||
background: #fff; | background: #fff; | ||||
border-bottom: 1px solid #ccc; | border-bottom: 1px solid #ccc; | ||||
> ul { | |||||
>ul { | |||||
// background: #32aa32; | // background: #32aa32; | ||||
padding: 0; | |||||
list-style: none; | list-style: none; | ||||
padding: 6px; | |||||
margin: 0; | margin: 0; | ||||
margin-left: 10px; | |||||
display: flex; | display: flex; | ||||
li { | |||||
padding: 0; | |||||
} | |||||
} | } | ||||
} | } | ||||
#left-panel { | #left-panel { | ||||
overflow: auto; | |||||
grid-area: left; | grid-area: left; | ||||
background: #f1f1f1; | |||||
background: #fff; | |||||
h2 { | |||||
margin: 0; | |||||
font-weight: 400; | |||||
padding: 4px 20px; | |||||
border-bottom: 1px solid #ccc; | |||||
background: #ccc; | |||||
} | |||||
} | } | ||||
#edit-panel { | #edit-panel { | ||||
padding: 20px; | |||||
overflow: auto; | |||||
grid-area: main; | grid-area: main; | ||||
background: #e1e1e1; | |||||
justify-items: center; | |||||
background: #fff; | |||||
border-left: 1px solid #ccc; | |||||
border-right: 1px solid #ccc; | |||||
} | } | ||||
#right-panel { | #right-panel { | ||||
overflow: auto; | |||||
grid-area: right; | grid-area: right; | ||||
background: #f1f1f1; | |||||
background: #fff; | |||||
h2 { | |||||
margin: 0; | |||||
font-weight: 400; | |||||
padding: 4px 12px; | |||||
border-bottom: 1px solid #ccc; | |||||
background: #ccc; | |||||
} | |||||
} | } | ||||
</style> | </style> | ||||
<style lang="scss"> | <style lang="scss"> | ||||
// 子组件的样式 | // 子组件的样式 | ||||
.nav-selector__item { | .nav-selector__item { | ||||
font-size: 18px; | |||||
letter-spacing: 1px; | |||||
// font-weight: 600; | |||||
padding: 6px 12px; | |||||
line-height: 1.25; | |||||
position: relative; | position: relative; | ||||
cursor: pointer; | cursor: pointer; | ||||
&:not(:last-child) { | |||||
margin-right: 12px; | |||||
&:hover { | |||||
background: #f1f1f1; | |||||
} | } | ||||
ul { | ul { | ||||
@@ -177,9 +233,9 @@ export default { | |||||
margin: 0; | margin: 0; | ||||
padding: 0; | padding: 0; | ||||
position: absolute; | position: absolute; | ||||
top: 128%; | |||||
top: 100%; | |||||
min-width: 128px; | min-width: 128px; | ||||
left: -6px; | |||||
left: 0px; | |||||
background: #fff; | background: #fff; | ||||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||||
// border-radius: 4px; | // border-radius: 4px; | ||||
@@ -188,8 +244,9 @@ export default { | |||||
z-index: 100; | z-index: 100; | ||||
li { | li { | ||||
padding: 2px 6px; | |||||
padding: 6px 12px; | |||||
cursor: pointer; | cursor: pointer; | ||||
&:hover { | &:hover { | ||||
background: #f1f1f1; | background: #f1f1f1; | ||||
} | } | ||||