update print page
This commit is contained in:
parent
b9e39dacf1
commit
57960ff8bf
@ -1,215 +1,218 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta charset="utf-8" />
|
||||||
<meta name="renderer" content="webkit" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<meta
|
<meta name="renderer" content="webkit" />
|
||||||
name="viewport"
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||||
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" />
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||||
<title><%= webpackConfig.name %></title>
|
<title>
|
||||||
<!--[if lt IE 11]>
|
<%= 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>
|
<style>
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
#app {
|
#app {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.chromeframe {
|
100% {
|
||||||
margin: 0.2em 0;
|
-webkit-transform: rotate(360deg);
|
||||||
background: #ccc;
|
-ms-transform: rotate(360deg);
|
||||||
color: #000;
|
transform: rotate(360deg);
|
||||||
padding: 0.2em 0;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-ms-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#loader-wrapper {
|
100% {
|
||||||
position: fixed;
|
-webkit-transform: rotate(360deg);
|
||||||
top: 0;
|
-ms-transform: rotate(360deg);
|
||||||
left: 0;
|
transform: rotate(360deg);
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 999999;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#loader {
|
#loader-wrapper .loader-section {
|
||||||
display: block;
|
position: fixed;
|
||||||
position: relative;
|
top: 0;
|
||||||
left: 50%;
|
width: 51%;
|
||||||
top: 50%;
|
height: 100%;
|
||||||
width: 150px;
|
background: #7171c6;
|
||||||
height: 150px;
|
z-index: 1000;
|
||||||
margin: -75px 0 0 -75px;
|
-webkit-transform: translateX(0);
|
||||||
border-radius: 50%;
|
-ms-transform: translateX(0);
|
||||||
border: 3px solid transparent;
|
transform: translateX(0);
|
||||||
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 {
|
#loader-wrapper .loader-section.section-left {
|
||||||
content: '';
|
left: 0;
|
||||||
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 {
|
#loader-wrapper .loader-section.section-right {
|
||||||
content: '';
|
right: 0;
|
||||||
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 {
|
.loaded #loader-wrapper .loader-section.section-left {
|
||||||
0% {
|
-webkit-transform: translateX(-100%);
|
||||||
-webkit-transform: rotate(0deg);
|
-ms-transform: translateX(-100%);
|
||||||
-ms-transform: rotate(0deg);
|
transform: translateX(-100%);
|
||||||
transform: rotate(0deg);
|
-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);
|
||||||
|
}
|
||||||
|
|
||||||
100% {
|
.loaded #loader-wrapper .loader-section.section-right {
|
||||||
-webkit-transform: rotate(360deg);
|
-webkit-transform: translateX(100%);
|
||||||
-ms-transform: rotate(360deg);
|
-ms-transform: translateX(100%);
|
||||||
transform: rotate(360deg);
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
.loaded #loader {
|
||||||
0% {
|
opacity: 0;
|
||||||
-webkit-transform: rotate(0deg);
|
-webkit-transition: all 0.3s ease-out;
|
||||||
-ms-transform: rotate(0deg);
|
transition: all 0.3s ease-out;
|
||||||
transform: rotate(0deg);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
.loaded #loader-wrapper {
|
||||||
-webkit-transform: rotate(360deg);
|
visibility: hidden;
|
||||||
-ms-transform: rotate(360deg);
|
-webkit-transform: translateY(-100%);
|
||||||
transform: rotate(360deg);
|
-ms-transform: translateY(-100%);
|
||||||
}
|
transform: translateY(-100%);
|
||||||
}
|
-webkit-transition: all 0.3s 1s ease-out;
|
||||||
|
transition: all 0.3s 1s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
#loader-wrapper .loader-section {
|
.no-js #loader-wrapper {
|
||||||
position: fixed;
|
display: none;
|
||||||
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 {
|
.no-js h1 {
|
||||||
left: 0;
|
color: #222222;
|
||||||
}
|
}
|
||||||
|
|
||||||
#loader-wrapper .loader-section.section-right {
|
#loader-wrapper .load_title {
|
||||||
right: 0;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-left {
|
#loader-wrapper .load_title span {
|
||||||
-webkit-transform: translateX(-100%);
|
font-weight: normal;
|
||||||
-ms-transform: translateX(-100%);
|
font-style: italic;
|
||||||
transform: translateX(-100%);
|
font-size: 13px;
|
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
color: #fff;
|
||||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
.loaded #loader-wrapper .loader-section.section-right {
|
<body>
|
||||||
-webkit-transform: translateX(100%);
|
<div id="app">
|
||||||
-ms-transform: translateX(100%);
|
<div id="loader-wrapper">
|
||||||
transform: translateX(100%);
|
<div id="loader"></div>
|
||||||
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
<div class="loader-section section-left"></div>
|
||||||
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
<div class="loader-section section-right"></div>
|
||||||
}
|
<div class="load_title">正在加载系统资源，请耐心等待</div>
|
||||||
|
|
||||||
.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>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
339
public/print-lock.css
Normal file
339
public/print-lock.css
Normal file
@ -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) {
|
handleClickItem(e) {
|
||||||
this.$emit('click', e.target.innerText)
|
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) {
|
handleCloseOtherMenu(vueInstance) {
|
||||||
this.$children.forEach(vm => {
|
this.$children.forEach(vm => {
|
||||||
if (vm != vueInstance) {
|
if (vm != vueInstance) {
|
||||||
vm.closeSubMenu()
|
vm.closeSubMenu()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleItemClicked(e) {
|
handleItemClicked(e) {
|
||||||
this.$emit('action', 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) {
|
loadDesigner() {
|
||||||
console.log('name', name)
|
$("#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) {
|
&:hover {
|
||||||
margin-right: 12px;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user