update print page
This commit is contained in:
		@@ -1,14 +1,16 @@
 | 
				
			|||||||
<!DOCTYPE html>
 | 
					<!DOCTYPE html>
 | 
				
			||||||
<html>
 | 
					<html>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<head>
 | 
					<head>
 | 
				
			||||||
	<meta charset="utf-8" />
 | 
						<meta charset="utf-8" />
 | 
				
			||||||
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 | 
						<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 | 
				
			||||||
	<meta name="renderer" content="webkit" />
 | 
						<meta name="renderer" content="webkit" />
 | 
				
			||||||
		<meta
 | 
						<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 | 
				
			||||||
			name="viewport"
 | 
						<link rel="stylesheet" type="text/css" media="print" href="<%= BASE_URL %>print-lock.css">
 | 
				
			||||||
			content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 | 
					 | 
				
			||||||
	<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 | 
						<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 | 
				
			||||||
		<title><%= webpackConfig.name %></title>
 | 
						<title>
 | 
				
			||||||
 | 
							<%= webpackConfig.name %>
 | 
				
			||||||
 | 
						</title>
 | 
				
			||||||
	<!--[if lt IE 11]>
 | 
						<!--[if lt IE 11]>
 | 
				
			||||||
			<script>
 | 
								<script>
 | 
				
			||||||
				window.location.href = 'html/ie.html';
 | 
									window.location.href = 'html/ie.html';
 | 
				
			||||||
@@ -212,4 +214,5 @@
 | 
				
			|||||||
		</div>
 | 
							</div>
 | 
				
			||||||
	</div>
 | 
						</div>
 | 
				
			||||||
</body>
 | 
					</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,7 +41,8 @@ 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) {
 | 
				
			||||||
@@ -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) => {
 | 
				
			||||||
@@ -90,6 +103,7 @@ export default {
 | 
				
			|||||||
	props: {},
 | 
						props: {},
 | 
				
			||||||
	data() {
 | 
						data() {
 | 
				
			||||||
		return {
 | 
							return {
 | 
				
			||||||
 | 
								hiprintTemplate: null,
 | 
				
			||||||
			menu: [
 | 
								menu: [
 | 
				
			||||||
				{
 | 
									{
 | 
				
			||||||
					name: '菜单',
 | 
										name: '菜单',
 | 
				
			||||||
@@ -103,7 +117,24 @@ export default {
 | 
				
			|||||||
		};
 | 
							};
 | 
				
			||||||
	},
 | 
						},
 | 
				
			||||||
	computed: {},
 | 
						computed: {},
 | 
				
			||||||
 | 
						mounted() {
 | 
				
			||||||
 | 
							this.loadSideBar();
 | 
				
			||||||
 | 
							this.loadDesigner();
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
	methods: {
 | 
						methods: {
 | 
				
			||||||
 | 
							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) {
 | 
							handleAction(name) {
 | 
				
			||||||
			console.log('name', name)
 | 
								console.log('name', name)
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
@@ -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';
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@@ -135,41 +166,66 @@ export default {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
	>ul {
 | 
						>ul {
 | 
				
			||||||
		// background: #32aa32;
 | 
							// background: #32aa32;
 | 
				
			||||||
		list-style: none;
 | 
					 | 
				
			||||||
		padding: 6px;
 | 
					 | 
				
			||||||
		margin: 0;
 | 
					 | 
				
			||||||
		display: flex;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
		li {
 | 
					 | 
				
			||||||
		padding: 0;
 | 
							padding: 0;
 | 
				
			||||||
		}
 | 
							list-style: none;
 | 
				
			||||||
 | 
							margin: 0;
 | 
				
			||||||
 | 
							margin-left: 10px;
 | 
				
			||||||
 | 
							display: flex;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#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;
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user